Implementation of Datatables in Laravel

To implement datatables in Laravel, you can use the “yajra/laravel-datatables-oracle” package.

Laravel Datatables provides a quick search, pagination, ordering, and sorting in the table. The datatables are jQuery plugins that allow you to add advanced interaction controls to your HTML tables data which is very useful in UI/UX. Laravel Datatables also provide Ajax for data searching and filtering. It gives the functionalities like search, sort, and pagination on a table.

Here are the steps to implement of DataTables in Laravel:

Step 1: Install Laravel Project

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

Step 2: Setup MySQL database

Configure this database in the .env file.

//.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldatatables
DB_USERNAME=root
DB_PASSWORD=

I have set up local database credentials.

Next, migrate two tables provided by Laravel Move to your cmd and hit the following command.

php artisan migrate 

It will place two tables in your database.

  1. users 
  2. password_resets  

Step 3: Install the yajra Package

We will install the yajra/laravel-datatables-oracle package by writing the following command in cmd.

composer require yajra/laravel-datatables-oracle

Step 4: Define providers and aliases.

Find the providers in config >> app.php file and register the DatatablesServiceProvider.

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

Place the aliases in config >> app.php file and register the aliases.

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

Step 5: Generating dummy data

We need to generate some dummy records for this example. So follow the command.

php artisan tinker

factory(App\User::class, 100)->create();
Laravel Datatables Tutorial

Step 6: Create a controller and route

php artisan make:controller DisplayDataController --resource

It will create one controller file called DisplayDataController.php.

We register routes in routes  >>  web.php file. So let us do it.

//web.php

Route::get('create', 'DisplayDataController@create');
Route::get('index', 'DisplayDataController@index');
//DisplayDataController.php

use Datatables;
use App\User;

/**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return Datatables::of(User::query())->make(true);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('displaydata');
    }

Step 7: Create a view file.

Create a file in the resources  >>  views  >>   displaydata.blade.php and put the following code in it.

//displaydata.blade.php

<html lang="en">
<head>
    <title>Laravel DataTables Tutorial Example</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  
        <link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
      <body>
         <div class="container">
               <h2>Laravel DataTables Tutorial Example</h2>
            <table class="table table-bordered" id="table">
               <thead>
                  <tr>
                     <th>Id</th>
                     <th>Name</th>
                     <th>Email</th>
                  </tr>
               </thead>
            </table>
         </div>
       <script>
         $(function() {
               $('#table').DataTable({
               processing: true,
               serverSide: true,
               ajax: '{{ url('index') }}',
               columns: [
                        { data: 'id', name: 'id' },
                        { data: 'name', name: 'name' },
                        { data: 'email', name: 'email' }
                     ]
            });
         });
         </script>
   </body>
</html>

Here, what we have done i when the page is loaded, we send an AJAX request to the server and get the exact data we need to display on the table. In our case, it is id, name, and email. 

It appends all the data to the #table id with searching, sorting, and pagination functionality.

Run the below command.

php artisan serve 

Open the URL in your browser: http://localhost:8000/create

Possible Error:

DataTables warning: table id=table – Ajax error. For more information about this error, please see http://datatables.net/tn/7

Possible Solution: 

Change Providers and aliases in config >> app.php file

Yajra\Datatables\DatatablesServiceProvider::class,
'Datatables' => Yajra\Datatables\Datatables::class,

to this

yajra\Datatables\DatatablesServiceProvider::class,
'Datatables' => yajra\Datatables\Datatables::class,

Laravel Datatables Ajax

The screenshot below was captured when I searched the tables, and it works perfectly.

Laravel Datatables ExampleThat’s it for Laravel Datatables.

22 thoughts on “Implementation of Datatables in Laravel”

  1. hey krunal,
    i did this tutorial but i got the above discussed error and i tried it by given solution but it doesn’t work…any other solution ??

    thank you,

    Reply
    • Did you see above, and try the steps?

      Possible Error:
      DataTables warning: table id=table – Ajax error. For more information about this error, please see http://datatables.net/tn/7

      Possible Solution:
      Change Providers and aliases in config >> app.php file

      Yajra\Datatables\DatatablesServiceProvider::class,
      ‘Datatables’ => Yajra\Datatables\Datatables::class,
      to this

      yajra\Datatables\DatatablesServiceProvider::class,
      ‘Datatables’ => yajra\Datatables\Datatables::class,

      Reply
  2. @Jhon
    Verifica el orden de tus rutas, lo solucione de esta manera:
    Route::get(‘grupos/getdata’, ‘GrupoController@getdata’)->name(‘grupos.getdata’); // 1st
    Route::resource(‘grupos’, ‘GrupoController’); //Last

    Reply
  3. $data = DoctorSubCategory::with([‘doctorCategory’])->get();
    // dd($data);
    //— Integrating This Collection Into Datatables
    return Datatables::of($data)
    ->addColumn(‘action’, function($data) {
    return view(‘admin.doctor.action-doctor-subcategory’,compact(‘data’));
    })
    ->toJson();

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.