Use Server Side Datatable Laravel 5.8

by

In this post, we are going to know about Server Side Datatable using Laravel 5.8. Data Table is one of the most important plugins in jQuery Library to show data in tables with the advance search function.

Use Server Side Datatable Laravel 5.8

Datatables is very important for showing large data into the table. the main advantage of the data table is it gives to users the advanced search function to filter data and It also provides a lot of user-friendly functionalities like sort, pagination, and searches, and others functions to handle the database data in our web pages.

We will use using yajra/laravel-datatables-oracle package in this blog post this package help us to load web page faster than normal HTML table.

Step 1: Install Laravel

First, we need to install Laravel application to install the latest application use the flowing command.

laravel new dataTables

Step 2: Install Composer Package

In this step, we will install laravel yajra/laravel-datatables-oracle package for use to generate Server Side Datatable. So we need to just run following command to this install package.

composer require yajra/laravel-datatables-oracle:"~9.0"

Step 3: Register provider 

Register provider and facade on your config/app.php file.

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

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

Step 4: Create a New Model, Controller, and Migration

Here, we want to create a new modal, controller and migration for Products table so first fire bellow command.

php artisan make:model Product -mc

Above command, will create Model, Controller, and Migration for Product. In the migration table file, we need to add some number 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');
    }
}

After That don’t forget to connect with a database in .env and restart the server than that run the flowing command to migrate the table product table.

php artisan migrate

Step 5: Update Product Modal

Then we need to update the Product model file in our application like fillable, primary key, product, etc. 


<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

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

Step 6 Add Some Routes

Add the first route to show data table and the second route to fetch data from the data table. here we use get method for both routes

Route::get('products-datatable', '[email protected]')->name('product.datatable');
Route::get('products-data', 'Produc[email protected]')->name('product.data');

Step 6: Update Controller with Some Methods

Here we use two methods one for view page and another one fetch data from the database.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
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: Add a Blade File

At the final step, we make a one blade file in the products folder. we use some JS library CDN link and some simple javascript code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset=UTF-8>
  <meta name=viewport content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="//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=//code.jquery.com/jquery.js></script>
  <script src=//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js></script>
  <title>Document</title>
</head>
<body>


<div >

  <div >

   <div >Server Side Datatable in Laravel 5</div>

   <div >

     <table id="product-table">
      <thead>
        <tr>
          <th>SNo.</th>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
     </table>

   </div>

  </div>

</div>


<script>



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

</body>
</html>

So here we completed post on Use Server Side Datatable Laravel 5.8.

Good Luck!

Leave a Comment