Blog

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

1. Introduction to Yajra DataTables
2. Setting Up Laravel Project
3. Installing Yajra DataTables
4. Creating a Database and Model
5. Building a Controller
6. Implementing DataTables in Views
7. 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