➧Server Side Data Table Implementation In Laravel. • Softbranchdevelopers

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.

Contents

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-oracle

Set the providers and alias in config/app.php.

‘providers’ => [
….
YajraDataTablesDataTablesServiceProvider::class,
]
‘aliases’ => [
….
‘DataTables’ => YajraDataTablesFacadesDataTables::class,
]

Add Route

Route::get(‘table’, ‘[email protected]’)->name(‘table’);

Create Controller.

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppProduct;
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 IlluminateDatabaseEloquentModel;
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>

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>