In this post, we are going to know about Server Side Datatable using Laravel 5. Data Table is one of the most important plugins in jQuery Library. It provides the lot of user-friendly functionalities like sort, pagination, and searches etc to handle the database data in our web pages. In laravel, we can implement this Server Side Datatable using yajra/laravel-datatables-oracle package. It provides full data table functionalities in our laravel web applications. Server Side Datatable help us to load web page faster than normal HTML table.
Step 1: Install Laravel
Here, we need new Laravel application for API passport implementation and demonstration. the following command helps to create a new application.
|
1 |
composer create-project --prefer-dist laravel/laravel myLaravel |
Step 2: Install Composer Package
In this step, we have to download and install laravel yajra/laravel-datatables-oracle package for use to generate Server Side Datatable. So just run following command to download and install package.
|
1 |
composer require yajra/laravel-datatables-oracle |
Step 3: Application configuration
After successfully installed the package then we should update the application config details to use the package in our application. Here we need to add providers & aliases array details with following details,
|
1 2 3 4 5 6 7 8 9 10 11 |
'providers' => [ .... .... Yajra\DataTables\DatatablesServiceProvider::class, ], 'aliases' => [ .... .... 'Datatables' => Yajra\DataTables\Facades\DataTables::class, ] |
Step 4: Create Model, Controller, and Migration
Here, we want to create a migration for Products table using Laravel 5.5 php artisan command, so first fire bellow command:
|
1 |
php artisan make:model Product -mc |
Above command, help us to create Model, Controller, and Migration for Product master. In migration table file, we need to add the required no of columns details for product table like name, description, and price etc.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateProductsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('products', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->text('description'); $table->float('price'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('products'); } } |
Then we need to go and update the Product model file in our application like fillable, primary key, product, etc. Product model files present at app/Product.php path and just update with following details in it.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Product extends Model { protected $fillable = [ 'name', 'description', 'price', ]; } |
Step 5: Routes Definition
In the fifth step, we want to add new routes for showing database data as a server-side data table. so just goto routes/web.php file and update the following routes to access data table operation in our application.
|
1 2 |
Route::get('products-datatable', 'ProductController@datatable')->name('product.datatable'); Route::get('products-data', 'ProductController@productsList')->name('product.data'); |
Step 6: Create Controller with Methods
On this step, we want to make a new controller for Server Side Datatable operations in laravel application. After creating a controller file we need to define a methods and handling function in it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\Redirect; use App\Product; use Datatables; class ProductController extends Controller { public function datatable(){ return view('products-datatable'); } public function productsList(){ return Datatables::of(Product::query())->make(true); } } |
Step 7: Blade File Defining
In the final step, we make a one blade file with Datatable and with required CSS and JS library. Following code help us to show the database data into Server Side Datatable in laravel application using yajra/laravel-datatables-oracle package.
|
1 2 3 4 5 |
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> |
HTML table as,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="container"> <div class="panel panel-primary"> <div class="panel-heading">Server Side Datatable in Laravel 5</div> <div class="panel-body"> <table class="table table-bordered" id="product-table"> <thead> <tr> <th>SNo.</th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> </table> </div> </div> </div> |
and data-table JS script as,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { $('#product-table').DataTable({ processing: true, serverSide: true, ajax: '{!! route('product.data') !!}', columns: [ { data: 'id', name: 'id' }, { data: 'name', name: 'name' }, { data: 'description', name: 'description' }, { data: 'price', name: 'price' } ] }); }); |
Now you are ready to see the demonstration of Server Side Datatable using laravel.
