16-Apr-2024
.
Admin
Hi, Dev
In this guide, I'll demonstrate the utilization of Yajra Datatables within a Laravel 11 project. Our tool of choice will be the `yajra/laravel-datatables` composer package, empowering us to seamlessly integrate datatables into our Laravel 11 application.
Yajra Datatables equips us with convenient features like quick search, pagination, ordering, and sorting. Essentially, Datatables serve as jQuery plugins facilitating the integration of advanced interaction controls into your HTML table data. Moreover, Datatables offer AJAX functionality for efficient data searching and retrieval. Leveraging Datatables, you can craft user-friendly layouts for seamless searching and sorting experiences. Integrating Datatables into your Laravel application is also easily achievable.
In this example, we will install the yajra/laravel-datatables composer package. We will use the default "users" table and add some dummy users to it using Tinker. Then, we will simply list all users using Yajra Datatables. You can search, sort, and paginate using Datatables in Laravel 11. So let's follow the steps below and get it done.
Step for How to use Yajra Datatables in Laravel 11?
Step 1: Install Laravel 11
Step 2: Install Yajra Datatable
Step 3: Add Dummy Users
Step 4: Create Controller
Step 5: Create Route
Step 6: Create Blade File
Run Laravel App
Follow the below steps:
Step 1: Install Laravel 11
This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:
composer create-project laravel/laravel example-app
Step 2: Install Yajra Datatable
In this step, we need to install Yajra Datatable via the Composer package manager, so open your terminal and fire the below command:
composer require yajra/laravel-datatables
Step 3: Add Dummy Users
In this step, we will create some dummy users using Tinker Factory. So let's create dummy records using the below command:
php artisan tinker
User::factory()->count(20)->create()
Step 4: Create Controller
In this point, now we should create a new controller as UserController. This controller will manage layout and handle data requests, returning responses. So, put the content below in the controller file:
app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use DataTables;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
if ($request->ajax()) {
$data = User::query();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View </a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('users');
}
}
Step 5: Add Route
In this step, we need to create a route for the DataTables layout file and another one for getting data. So open your "routes/web.php" file and add the following route.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
Route::get('users', [UserController::class, 'index'])->name('users.index');
Step 6: Create Blade File
In Last step, let's create users.blade.php(resources/views/users.blade.php) for layout and we will write design code here and put following code:
resources/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title> How to Use Yajra Datatables in Laravel 11? - NiceSnippets.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3"> How to Use Yajra Datatables in Laravel 11? - NiceSnippets.com</h3>
<div class="card-body">
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</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 = $('.data-table').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>
Run Laravel App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:
php artisan serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:8000/users
Output:
I hope it can help you...
#Laravel 11
