Hello Devs,
In this tutorial, we are going to learn about datatable ajax pagination with search and sort in laravel application.
Follow this step by step guide given below:
Step 1 :
Install Laravel App
composer create-project --prefer-dist laravel/laravel blog
Step 2 :
Setup Database Configuration
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 routes/web.php
Route::get('userss','UserController@index');
Route::get('/users/getusers/','UserController@getUser')->name('users.getusers');
Step 4 :
Create Controller
php artisan make:controller UserController
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
/resources/views/book/create.blade.php
<!DOCTYPE html>
<html>
<head>
<title>laravel datatables pagination with search and sort - rathorji.in</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 - Rathorji.in</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>
I hope this example helps you.