In web development, presenting data in an organized and interactive manner is crucial for enhancing user experience. Laravel, a popular PHP framework, provides developers with powerful tools to manage data efficiently. laravel 11 Yajra DataTables is a package that simplifies the process of creating dynamic and responsive tables with advanced features like searching, sorting, and pagination.
In this tutorial, we will explore how to integrate Yajra DataTables into a Laravel 8 application step-by-step. By the end of this tutorial, you will have a clear understanding of how to leverage DataTables to build interactive data tables effortlessly.
Table of Contents
- Introduction to Yajra DataTables
- Setting Up Laravel Project
- Installing Yajra DataTables
- Creating a Database and Model
- Building a Controller
- Implementing DataTables in Views
- Conclusion
1. Introduction to Yajra DataTables
Yajra DataTables is a Laravel package that provides a fluent interface to build data tables effortlessly. It integrates seamlessly with Laravel’s Eloquent ORM and offers features like server-side processing, column filtering, and more. With Yajra DataTables, developers can create interactive and responsive tables with minimal effort.
2. Setting Up Laravel Project
First, ensure that you have Composer installed on your system. If not, download and install it from Composer’s official website.
To create a new Laravel project, open your terminal and run the following command:
composer create-project --prefer-dist laravel/laravel yajra-datatable-tutorial
This command will create a new Laravel project named yajra-datatable-tutorial
.
Navigate to your project directory:
cd yajra-datatable-tutorial
3. Installing Yajra DataTables
Next, we need to install the Yajra DataTables package via Composer. Run the following command in your terminal:
composer require yajra/laravel-datatables-oracle
This command will install the Yajra DataTables package along with its dependencies.
4. Creating a Database and Model
For this tutorial, we will create a simple users
table to demonstrate Yajra DataTables. Create a new MySQL database and update your .env
file with your database credentials.
Next, generate a new model and migration for the users
table using Artisan:
php artisan make:model User -m
This command will create a User
model and its corresponding migration file. Open the migration file located at database/migrations
and define the schema for the users
table.
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
Run the migration to create the users
table:
php artisan migrate
5. Building a Controller
Now, let’s create a controller to handle the logic for fetching and displaying user data using Yajra DataTables.
php artisan make:controller UserController
Open the UserController.php
file located at app/Http/Controllers
and define the following methods:
use App\Models\User;
use DataTables;
public function index()
{
return view('users.index');
}
public function getUsers()
{
$users = User::select(['id', 'name', 'email', 'created_at', 'updated_at']);
return DataTables::of($users)->make(true);
}
6. Implementing DataTables in Views
Create a new Blade view file named index.blade.php
inside the resources/views/users
directory. Add the following code to implement DataTables:
@extends('layouts.app')
@section('content')
<div class="container">
<table class="table table-bordered" id="users-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
</table>
</div>
@endsection
@push('scripts')
<script>
$(function () {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route('users.data') }}',
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'created_at', name: 'created_at'},
{data: 'updated_at', name: 'updated_at'}
]
});
});
</script>
@endpush
7. Conclusion
In this tutorial, we have explored how to integrate Yajra DataTables into a Laravel 8 application. By following the steps outlined above, you can create dynamic and responsive data tables with advanced features effortlessly. DataTables simplifies the process of presenting data to users, enhancing the overall user experience of your web applications. Experiment with DataTables’ various options and customize it to suit your specific requirements. Happy coding!
- Check our tools small Tools
- Check our tools website Word count