Working with large amounts of data in a Laravel application can become complex when it comes to presenting information in a clean and user-friendly way. This is where Yajra DataTables comes in. It offers advanced functionality in real time, such as search, sort, and pagination. It displays the data interactively and efficiently. In this simple 4 step guide, we will show you how to implement Yajra DataTables in Laravel 11.
Steps for Laravel Yajra DataTables
Step 1: Install the Package
Firstly, you must use composer to install Yajra DataTables. This will install all dependencies needed to enable DataTables use in Laravel.
composer require yajra/laravel-datatables-oracleStep 2: Create a Controller
Secondly, you need to create a controller that will include fetching data, as well as serving it up to the DataTable. For demonstration, we’ll use the User model.
php artisan make:controller UserControllerphp artisan make:controller UserController
use App\Models\User;
use Yajra\DataTables\Facades\DataTables;
class UserController extends Controller
{
public function index()
{
if (request()->ajax()) {
$data = User::query();
return DataTables::of($data)->make(true);
}
return view('users.index');
}
}Step 3: Add Route
Now define a route in your web.php file to connect the controller with the view.
use App\Http\Controllers\UserController;
Route::get('/users', [UserController::class, 'index'])→name('users.index');Step 4: Create Blade File
Third, make a Blade file that displays the DataTable. Note that we’ll need to include the DataTables CSS & JS and we’ll need to initialize the DataTable using jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Users List</title>
<!-- DataTables CSS & JS →
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
<h2>User List</h2>
<table id="users-table" class="display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
</table>
<script>
$(document).ready(function () {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('users.index') }}",
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' }
]
});
});
</script>
</body>
</html>Conclusion
After 4 easy steps, you will have a fully implemented DataTable in Laravel 11! Your DataTable has built in, real-time search, sort, and pagination. Not only does this provide a great user experience, it can handle large data sets too. As a developer, you can create a full production app from this with advanced features such as custom filters, export features, and CRUD actions for full integration.
FAQ
- What is Laravel?
Laravel is a web application framework with an elegant and expressive syntax that provides a foundation and starting point for creating web applications in PHP.
- Why Choose Laravel?
Laravel has a robust set of features, including an expressive database abstraction layer (Eloquent), a powerful templating engine (Blade), built-in authentication and authorization, an expressive routing system, queues, scheduled tasks, and a command line tool (Artisan CLI). One of the biggest focuses of Laravel is the developer experience, and it has tons of powerful tools to help with that experience.
