This post will show how to load big or large data like 10 lakh within a few seconds in Laravel using the DataTable Server process.

First Initializing Yajra laravel-datatables plugin

Run the following in the command/terminal,

composer require yajra/laravel-datatables-oracle

1

composer require yajra/laravel-datatables-oracle
Check composer.json

"require": { ……………… "yajra/laravel-datatables-oracle": "~9.0" },

1
2
3
4

"require": {
………………
"yajra/laravel-datatables-oracle": "~9.0"
},
add the following code file to config/app.php

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

'providers' => [

...,

Yajra\DataTables\DataTablesServiceProvider::class,

]

'aliases' => [

...,

'DataTables' => Yajra\DataTables\Facades\DataTables::class,

]

and finally, we publish the configuration, run the following line in the terminal,

  php artisan vendor:publish

1	php artisan vendor:publish

Code partially step by step for understanding(final code is given at the end)

View part(showing the table)

<table class="table table-striped" id="emptableid" width="100%">

    <thead>

      <tr>

        <th>uid</th>

        <th>Firstname</th>

        <th>Username</th>

        <th>Gender</th>

      </tr>

    </thead>

    <tbody>   </tbody>

  </table>

<thead>

<tr>

<th>Firstname</th>

<th>Username</th>

<th>Gender</th>

</tr>

</thead>

</table>

Import DataTables files

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 

<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

Getting Data from Controller

in .env for database setup

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=bigdata_db

DB_USERNAME=root

DB_PASSWORD=

In route

Route::get('/emp_list','EmpController@ss_processing’);

1

Route::get('/emp_list','EmpController@ss_processing’);
In controller

$query = DB::table('user_details')->orderBy('user_id'); 
return DataTables::queryBuilder($query)->toJson();

1 2	$query = DB::table('user_details')->orderBy('user_id'); return DataTables::queryBuilder($query)->toJson();

=====Final Codes======

3 main files

view file welcome.blade.php
route (web.php)
controller/database query part (EmpController.php)

suppose view file(welcome.blade.php)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>DataTables Bigdata load</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
 
</head>
<body>

<div class="container">
  <h2>within few sec,load BigData or 10 lakh or 1 million Datas/Rows quickly <br>using Datatables Server side in Laravel</h2>
  <p>Datatables Server Processing</p>            
  <table class="table table-striped" id="emptableid" width="100%">
    <thead>
      <tr>
        <th>uid</th>
        <th>Firstname</th>
        <th>Username</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>

  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>



  <script type="text/javascript">
    
    $(document).ready(function() {

      $("#emptableid").DataTable({
              serverSide: true,
              ajax: {
                  url: '{{url('emp_list')}}',
                  data: function (data) {
                      data.params = {
                          sac: "helo"
                      }
                  }
              },
              buttons: false,
              searching: true,
              scrollY: 500,
              scrollX: true,
              scrollCollapse: true,
              columns: [
                  {data: "user_id", className: 'uid'},
                  {data: "first_name", className: 'fname'},
                  {data: "username", className: 'uname'},
                  {data: "gender", className: 'gender'}
               
              ]  
        });

    });

  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>DataTables Bigdata load</title>

</head>

<body>

<h2>within few sec,load BigData or 10 lakh or 1 million Datas/Rows quickly <br>using Datatables Server side in Laravel</h2>

<p>Datatables Server Processing</p>

<thead>

<tr>

<th>Firstname</th>

<th>Username</th>

<th>Gender</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

$(document).ready(function() {

$("#emptableid").DataTable({

serverSide: true,

ajax: {

url: '{{url('emp_list')}}',

data: function (data) {

data.params = {

sac: "helo"

}

buttons: false,

searching: true,

scrollY: 500,

scrollX: true,

scrollCollapse: true,

columns: [

{data: "user_id", className: 'uid'},

{data: "first_name", className: 'fname'},

{data: "username", className: 'uname'},

{data: "gender", className: 'gender'}

]

});

</script>

</body>

</html>

here some important features

serverSide: true, for enabling the Datatables Server processing
for retrieving or get the data from the database

ajax: { url: ‘{{url(’emp_list’)}}’ },

to sent parameters or bariables to controller add data part in ajax

ajax: { url: ‘{{url(’emp_list’)}}’, data: function (data) { data.params = { sac: “helo” } } },

to show data in empty <tbody></tbody> write

columns: [
{data: “user_id”, className: ‘uid’},
{data: “first_name”, className: ‘fname’},
{data: “username”, className: ‘uname’},
{data: “gender”, className: ‘gender’}
]

here user_id,first_name,username,gender are the column names of database table

className for giving a attribute to tbody td

in view tbody need to empty
make sure theader td total number is qual to columns data because datatable columns data is referreing theader td repectively.
give the table width=”100%” style so that table header and tbody width aligned perfectly
suppose route (web.php)

<?php

use Illuminate\Support\Facades\Route;


Route::get('/', function () {
    return view('welcome');
});

Route::get('/emp_list','EmpController@ss_processing');

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

return view('welcome');

});

Route::get('/emp_list','EmpController@ss_processing');

in controller EmpController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use DataTables;

class EmpController extends Controller
{
    //
public function ss_processing(Request $request)
{
    //to use parameter or variable sent from ajax view
    $params = $request->params;

    $whereClause = $params['sac'];

 

    $query = DB::table('user_details')->orderBy('user_id');
      

    return DataTables::queryBuilder($query)->toJson();

}

}