Laravel Datatables Pagination with Search and Sort

Hello Friends,

In this blog,I will show you datatable ajax pagination with search and sort in laravel application.I am going to explain you search and sort datatable with ajax pagination laravel app.we will implement serching and sorting using datatable with ajax pagination laravel application.we will use datatable ajax pagination with searching and sorting in laravel.i would like to show you laravel datatable ajax pagination with search and sort.

If you need to use datatables ajax pagination with search and sort column in laravel app.Datatable provide searching, sorting and pagination using datatable ajax laravel application.

In this example, i will give you step by step explanation datatables ajax pagination with search and sort laravel application. you can also see above image for demo output.

Step 1 : Install Laravel App

In First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Setup Database Configuration

After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Step 3 : Create Route

now, we need to add tow route for user controller in laravel application. one route is show table data and another is get data for ajax. so open your "routes/web.php" file and add following route.

routes/web.php

Route::get('userss','UserController@index');
Route::get('/users/getusers/','UserController@getUser')->name('users.getusers');

Step 4 : Create Controler

Here this step now we should create new controller as UserController. So run bellow command and create new controller.

php artisan make:controller UserController

After successfully run above command after add two method in this controller one is index and another is getUser So, let's copy bellow code and put on UserController.php file.

app/http/controller/UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class Usercontroller extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function index()
    {
        return view('users');
    }

    public function getUser(Request $request)
    {
        $draw = $request->get('draw');
        $start = $request->get("start");
        $rowperpage = $request->get("length"); // Rows display per page

        $columnIndex_arr = $request->get('order');
        $columnName_arr = $request->get('columns');
        $order_arr = $request->get('order');
        $search_arr = $request->get('search');

        $columnIndex = $columnIndex_arr[0]['column']; // Column index
        $columnName = $columnName_arr[$columnIndex]['data']; // Column name
        $columnSortOrder = $order_arr[0]['dir']; // asc or desc
        $searchValue = $search_arr['value']; // Search value

        // Total records
        $totalRecords = User::select('count(*) as allcount')->count();
        $totalRecordswithFilter = User::select('count(*) as allcount')->where('name', 'like', '%' .$searchValue . '%')->count();

        // Fetch records
        $records = User::orderBy($columnName,$columnSortOrder)
            ->where('users.name', 'like', '%' .$searchValue . '%')
            ->select('users.*')
            ->skip($start)
            ->take($rowperpage)
            ->get();

        $data_arr = array();
        $sno = $start+1;
        foreach($records as $record){
            $id = $record->id;
            $username = $record->username;
            $name = $record->name;
            $email = $record->email;

            $data_arr[] = array(
                "id" => $id,
                "username" => $username,
                "name" => $name,
                "email" => $email
            );
        }

        $response = array(
            "draw" => intval($draw),
            "iTotalRecords" => $totalRecords,
            "iTotalDisplayRecords" => $totalRecordswithFilter,
            "aaData" => $data_arr
        ); 

        echo json_encode($response);
        exit;
    }

}

Step 5 : Create Blade File

In last step. In this step we have to create users blade file. So mainly we have to create users blade file in view directory. First file is create and second one is show file. So finally you have to create following file and put bellow code:

/resources/views/book/create.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>laravel datatables pagination with search and sort - nicesnippets.com</title>
    <!-- Datatables CSS CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

    <!-- jQuery CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Datatables JS CDN -->
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header bg-info text-white">Laravel Datatables Pagination with Search and Sort - NiceSnippets.com</div>
                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif
                        <table id='empTable' width='100%' border="1" style='border-collapse: collapse;'>
                            <thead>
                                <tr>
                                    <td>S.no</td>
                                    <td>Name</td>
                                    <td>Email</td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){

          // DataTable
          $('#empTable').DataTable({
             processing: true,
             serverSide: true,
             ajax: "{{route('users.getusers')}}",
             columns: [
                { data: 'id' },
                { data: 'name' },
                { data: 'email' },
             ]
          });
        });
    </script>
</body>
</html>

It will help you...