In this tutorial, We will learn how to implement Datatables with server side processing in Laravel. Here we will get data from MySQL database through ajax in Laravel. Datatables helps in adding sorting, paging and filtering abilities to plain HTML tables with minimal effort. The main goal is to enhance the accessibility of data in normal HTML tables.
Below are the steps to implement Datatables in Laravel.
Install Laravel.
In this step, we will install Laravel application if not installed already .Run below command to install Laravel application.
composer create-project --prefer-dist laravel/laravel demo
Install Yajra Datatable
Run the following command to install yajra datatable package for datatable.
composer require yajra/laravel-datatables-oracleSet the providers and alias in config/app.php.
'providers' => [
....
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
....
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]Add Route
Route::get('table', 'ProductController@getData')->name('table');Create Controller.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
use DataTables;
class ProductController extends Controller
{
public function getData(Request $request){
if ($request->ajax()) {
$datas = Product::all();
return Datatables::of($datas)->make();
}
return view('products');
}
}
Create Model
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
//
}
Create View
<!DOCTYPE html>
<html>
<head>
<title>Laravel Datatables Server Side Data Processing Example - ItSolutionStuff.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<h5>Laravel Datatables Server Side Data Processing Example</h5>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(function () {
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('table') }}",
columns: [
{data: 'p_id', name: 'p_id'},
{data: 'name', name: 'name'},
{data: 'price', name: 'price'},
]
});
});
</script>
</html>