Laravel Server Side Yajra DataTable - Load Large Data Within Few Seconds

 

Large Data or 1 million Data Quick Load within few seconds in Laravel Server Side DataTables 


  • Run the following in the command/terminal to create a new laravel project,
  • Run the following in the command/terminal to install yajra datatables package,
  • Check composer.json
     
  • Add the following code file to config/app.php

  • publish the configuration, run the following line in the terminal,
  • in .env for database setup

  • Add below files for list details in the table
<!DOCTYPE html>
<html lang="en">
<head>
<title>DataTables Load Large Data's</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">
<h3>Large Data or 1 million Data Quick Load within few second | DataTables Server Processing in Laravel</h3>
<br>
<table class="table table-striped" id="user_details_table" width="100%">
<thead>
<tr>
<th>ID</th>
<th>User Name</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Status</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 () {
$("#user_details_table").DataTable({
serverSide: true,
ajax: {
url: '{{route('user.details')}}'
},
buttons: false,
searching: true,
processing: true,
scrollY: 500,
scrollX: true,
scrollCollapse: true,
columns: [
{data: "user_id", className: 'user_id'},
{data: "username", className: 'username'},
{data: "first_name", className: 'first_name'},
{data: "last_name", className: 'last_name'},
{data: "gender", className: 'gender'},
{data: "status", className: 'status'}
]
});
});
</script>
</body>
</html>
view raw user_details.blade.php hosted with ❤ by GitHub
<?php
namespace App\Http\Controllers;
use Illuminate\Contracts\Foundation\Application;
use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Yajra\DataTables\DataTables;
class UserController extends Controller
{
/**
* List User Details
* @param Request $request
* @return Application|Factory|View|JsonResponse
*/
public function listUserDetails(Request $request)
{
if ($request->ajax()) {
$query = DB::table('user_details');
return DataTables::of($query)
->editColumn('status', function ($data) {
return $data->status == 1 ? 'Active' : 'Inactive';
})->make(true);
}
return view('user_details');
}
}
view raw UserController.php hosted with ❤ by GitHub
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
Route::get('/', function () {
return view('welcome');
});
Route::get('/user-list',[UserController::class, 'listUserDetails'])->name('user.details');
view raw web.php hosted with ❤ by GitHub
  • or you can click the link to clone the project https://github.com/rajadavid423/yajra-table-large-data-handle.git


    •      5 lakhs data SQL file - https://drive.google.com/file/d/1IhsdWS4OSNLZB64QsQsHIYa00hF9kywu/view

    Note:
















    Example:



    Comments

    Post a Comment

    Popular posts from this blog

    Laravel Database Transactions

    Database Transactions You may use the  transaction  method provided by the  DB  facade to run a set of operations within a database transaction. If an exception is thrown within the transaction closure, the transaction will automatically be rolled back and the exception is re-thrown. If the closure executes successfully, the transaction will automatically be committed. You don't need to worry about manually rolling back or committing while using the  transaction  method: use Illuminate\Support\Facades\ DB ;   DB :: transaction ( function () { DB :: update ( ' update users set votes = 1 ' );   DB :: delete ( ' delete from posts ' ); }); Handling Deadlocks The  transaction  method accepts an optional second argument which defines the number of times a transaction should be retried when a deadlock occurs. Once these attempts have been exhausted, an exception will be thrown: use Illuminate\Support\Facades\ DB ;   DB :: trans...
    Read more