We will be discussing the use of yajra data tables in Laravel 9 with the help of an example.
Yajra Datatables provides us with a quick search, pagination, ordering, sorting, etc. Datatables are jQuery plugins that enable you to add advanced interaction controls to your HTML tables data. Datatables also offer ajax for data searching and getting.
In the below example, we will be using the default “users” table and add some dummy users to it using tinker. After that, we will simply list all users using yajra data tables. Let’s see the below steps:
Step 1: Install Laravel 9
If you have not installed the Laravel app, then use the below command:
composer create-project laravel/laravel example-app
Step 2: Install Yajra Datatable
Install yajra datatable through the Composer package manager, using the below command:
composer require yajra/laravel-datatables-oracle
Step 3: Add Dummy Users
Create some dummy users using the tinker factory. Run the below command:
php artisan tinker User::factory()->count(20)->create()
Step 4: Create Controller
Create a new controller as UserController. this controller is used to manage the layout and get data requests and return responses, so use the below content 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::select('*');
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
Creates route for data tables layout file and another one for getting data. 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;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group that
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('users', [UserController::class, 'index'])->name('users.index');
Step 6: Create Blade File
Create users.blade.php(resources/views/users.blade.php) for layout and we will write design code here and use the following code:
resources/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Yajra Datatables Tutorial</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<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://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel 9 Yajra Datatables Tutorial</h1>
<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>
</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
Type the given below command and hit enter to run the Laravel app:
php artisan serve
Now, navigate to your web browser, type the given URL and view the app output:
Output:
