Server Side Datatable Using Laravel 5 ~ Learn Infinity

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.


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

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.


composer require yajra/laravel-datatables-oracle

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,


'providers' => [
	....
	....
	Yajra\DataTables\DatatablesServiceProvider::class,
],

'aliases' => [
	....
	....
	'Datatables' => Yajra\DataTables\Facades\DataTables::class,
]

'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:


php artisan make:model Product -mc

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.


<?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');
    }
}

<?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.


<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name', 'description', 'price',
    ];
}

<?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.


Route::get('products-datatable', 'ProductController@datatable')->name('product.datatable');
Route::get('products-data', 'ProductController@productsList')->name('product.data');

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.


<?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);
    }
}

<?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.


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


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

<div class="panel-heading">Server Side Datatable in Laravel 5</div>

<thead>

<tr>

<th>Description</th>

<th>Price</th>

</tr>

</thead>

</table>

</div>

and data-table JS script as,


$(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' }
        ]
    });
});

$(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.

6 Replies to “Server Side Datatable Using Laravel 5”

Pedro Danieli says:

January 5, 2018 at 8:44 PM

Hi, your demo was excellent, helps me alot. Now I have one question. I want to open a modal for edit each row data. How can I perform this? Can you help me?

1. Learn Infinity says:
  
  January 6, 2018 at 12:29 AM
  
  Hi Pedro Danieli,
  
  this code help me to done edit and delete button in datatable
  
  return Datatanles::of(Products::query())->addColumn(‘action’, function ($query) {
  return ‘id) . ‘” class=”btn btn-success”>Edit id) . ‘” class=”btn btn-danger”>Delete‘;
  })->make(true);
  
  your may try this way
  
  1. Pedro Danieli says:
    
    January 8, 2018 at 10:54 PM
    
    Thanks for answer. I will inprove this solution.
    
Mohamed Omar says:

January 24, 2018 at 9:30 PM

excellent work , i have previous problem with yajra/laravel-datatables but u make things alot easy with this tutorial , thank you.
but about this line in the controller
Products::query() is this and instance of builder or what as i could not find it in laravel documentation.
so what data type should i pass to Datatable::of() method?

Ahmed Essam says:

January 27, 2018 at 3:34 AM

Why the global search is not working with the addColumn function?

bhawani says:

April 18, 2019 at 6:52 PM

very nice article … i project work awesome.
thanks boss