Laravel 10 Yajra Server Side Datatables Tutorial
In this post we will give you information about Laravel 10 Yajra Server Side Datatables Tutorial. Hear we will give you detail about Laravel 10 Yajra Server Side Datatables Tutorial And how to use it also give you demo for it if it is necessary.
In this blog, We are going to know about Server Side Datatable using Laravel 10. Data Table is one of the most important plugins in the jQuery Library to show data in tables with the advanced search function.
Datatables are very important for showing large data in the table. the main advantage of the data table is that it gives to users the advanced search function to filter data and It also provides a lot of user-friendly functionalities like sort, pagination, searches, and other functions to handle the database data in our web pages.
We will use using yajra/laravel-datatables-oracle package for the server-side data tables.
Step 1: Install Laravel Project
First, open Terminal and run the following command to create a fresh laravel project:
#! /bin/bash
composer create-project --prefer-dist laravel/laravel laravel-datatable-exampleor, if you have installed the Laravel Installer as a global composer dependency:
#! /bin/bash
laravel new laravel-datatable-exampleStep 2: Configure Database Details
After, Installation Go to the project root directory, open the .env file, and set database detail as follow:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>Also see: How To Install WordPress with LAMP on Ubuntu 20.04
Step 3: Install Yajra Datatables
To install yajra datatables, we need to run a composer command. Open up the terminal and type this command and execute.
#! /bin/bash
composer require yajra/laravel-datatables-oracle:"~9.0"
This package is made to handle the server-side performance of jQuery plugin datatables via AJAX using Eloquent ORM, Query Builder, or Collection.
Step 4: Create Dummy Data
In this step, we will create some dummy users using the tinker factory. so let’s create dummy records using the below command:
First, Open tinker using this command
php artisan tinkerAfter opening tinker run the following command for creating dummy records
User::factory()->count(500)->create()Step 5: Add Route
In this step, we need to create a route for the data tables layout file and another one for getting data. so open your routes/web.php file and add the following route.
<?php
use IlluminateSupportFacadesRoute;
use AppHttpControllersUserController;
Route::get('users', [UserController::class, 'index'])->name('users.index');Also see: Password and Confirm Password Validation in Laravel
Step 6: Create Controller
At this point, now we should create a new controller as UserController. this controller will manage layout and get data requests and return a response, so put the below content in the controller file:
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppModelsUser;
use DataTables;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return IlluminateHttpResponse
*/
public function index(Request $request)
{
if ($request->ajax()) {
$data = User::select('id','name','email')->get();
return Datatables::of($data)->addIndexColumn()
->addColumn('action', function($row){
$btn = '<a href="javascript:void(0)" >View</a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('users');
}
}Step 7: Create Blade File
In the last step, let’s create users.blade.php(resources/views/users.blade.php) for the layout and we will write design code here and put the following code:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Server Side Datatables Tutorial</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div >
<div >
<div >
<table >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th width="100px">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
var table = $('.user_datatable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('users.index') }}",
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
</script>
</html>Now we are ready to run our example so run the below command:
#! /bin/bash
php artisan serveNow you can open the below URL on your browser:
http://localhost:8000/users
Thank you for reading this blog.
Also see: How to Get Previous and Next Record in Laravel
. .
If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.
Hope this code and post will helped you for implement Laravel 10 Yajra Server Side Datatables Tutorial. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs