Welcome To ITSolutionsGuides,
Yajra Datatables offers an array of functionalities including quick search, pagination, ordering, and sorting. Essentially, Datatables serve as jQuery plugins, enabling the integration of advanced interaction controls into HTML table data. Leveraging AJAX, Datatables facilitate seamless data retrieval and searching. Implementing Datatables in a Laravel application enhances user experience by providing a user-friendly layout for searching and sorting.
In this tutorial, we'll begin by installing the yajra/laravel-datatables composer package. Utilizing Laravel's default "users" table, we'll populate it with dummy users using Tinker. Subsequently, we'll demonstrate how to list all users using Yajra Datatables. With Laravel 11, Datatables empower users to seamlessly search, sort, and paginate data. Follow the steps outlined below to implement these features effectively.
Lets install the Yajra Datatable using the following command,
composer require yajra/laravel-datatablesLets generate the dummy records using the tinker, lets execute the artisan command,
php artisan tinker
after executing the artisan command enter the below command in the terminal to generate 20 dummy users records,
User::factory()->count(20)->create()Create controller using artisan command
after fetching the data from the database lets render the data with the 'Datatables::of()' inorder to use this keywords we should add the trait 'use DataTables;'
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');
}
}routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
Route::get('users', [UserController::class, 'index'])->name('users.index');create blade file using artisan command
resources/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 Yajra Datatables with Serverside Rendering Example Tutorial - itsolutionsguides</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">Laravel 11 Yajra Datatables with Serverside Rendering Example Tutorial - itsolutionsguides</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>Lets run the application using the following artisan command
php artisan serveWe hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides