Learn Infinity

Learn Some Thing New

Server Side Datatable Using Laravel 5

Server Side Datatable Using Laravel 5

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
2
3
 
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
2
3
 
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
12
13
 
'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
2
3
 
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
35
36
 
<?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
13
14
 
<?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
3
4
 
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
20
21
 
<?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
6
7
 
<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
25
26
 
<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
14
15
 
$(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.

 

Prev post Import and Export Excel and CSV in Laravel 5 Using maatwebsite
Next post Event Calendar in Laravel 5 Using Laravel-fullcalendar

Learn Infinity

Learn Infinity is the most famous Programming & Web Development blog. Our principal is to provide the best online tutorial on web development. We execute the best tutorials for web experts this will help developers, programmers, freelancers and proving free resource you can download or preview the tutorials.

Related Posts

6 thoughts on “Server Side Datatable Using Laravel 5”

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

    Reply

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top