How to Implement Yajra Datatables in Laravel 6

Are you stuck in managing a large number of data in a table? Then why don’t you go with the Datatables? Datatable is an open-source library that is used to manage the data. It provides pagination, sorting, searching, etc in the tables. Without using Datatable, you can have a kind of complexity to apply these features manually in the tables. In Laravel 6, we can use Yajra Datatables. Earlier, we had already seen the use of jQuery Datatable in PHP. But, in this post, I’ll be showing you the simple steps of implementing Yajra Datatables in Laravel 6.

How to Use AJAX in Laravel 6 with ToDo Application

Prerequisites

Before moving to this project, your system must be configured to create a Laravel 6 application. You need PHP version >=7.3.9, MySQL (version > 5). Also, you must aware of the datatables.

What is Datatable?

Datatable is basically a jQuery plugin. It provides a quick search of data, pagination, sorting, ordering, etc in a normal HTML table. Datatables also provide the AJAX feature to search the data. The page won’t refresh while searching the data in the table. It is good to use if you have a large number of data.

So, let’s know, how we can use Datatable in Laravel 6. So, just create a new project in Laravel 6.

Yajra DataTables in Laravel 6

Install Laravel 6 using the composer. It will create a new project folder including Laravel 6. It will take some time.

composer create-project --prefer-dist laravel/laravel datatable-demo

How to Send Email in Laravel 6 Via Gmail Using SMTP

Install Yajra DataTables

After creating the project you will need to install the Yajra Datatables package inside the project. So, just enter the below command.

composer require yajra/laravel-datatables-oracle

It will install the Yajra Datatables package in your project.

After installing the Yajra Datatable package in the project just configure the database.

How to Upload Multiple Images in Laravel 6 with Validation

Create Database in MySQL

Open the MySQL command prompt or MySQL workbench whatever you have. Just enter the below command to create a new database there.

CREATE DATABASE laravel6_datatables;

After creating the database, just configure the details in the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel6_datatables
DB_USERNAME=root
DB_PASSWORD=root

Laravel 6 REST API For ToDo Application with Passport Auth

Migrate Database in Laravel 6

You will need to migrate the database table so that the tables can be created. In this post, I am going to retrieve the data into the datatable. So for this, we’ll need to have the tables in the database.

After migrating the tables you can check the database for the tables. Here, the tables have been created.

Configure Providers and Aliases

In the next step, we’ll have to set the providers and aliases of Yajra datatable. So, just navigate to the config/app.php.

Add the below providers in the providers section.

Yajra\DataTables\DataTablesServiceProvider::class,

Also, set the below alias in the aliases section.

'DataTables' => Yajra\DataTables\Facades\DataTables::class,

How to Integrate Laravel 6 Application with Firebase

Add Dummy Records in Laravel 6

I am going to insert some dummy records in the users table. So that I can fetch those records in the datatable. I will use tinker class. For this, you will have to enter the below command in the command line.

php artisan tinker
factory(App\User::class, 200)->create();

The above command will create 200 dummy records in the users table.

You can check the user table has the dummy records.

Create User Controller

For getting data from users table, we will need a controller. So, just create a controller in which we’ll write our functions.

php artisan make:controller UserController

Once, the controller has been created add the following code snippet there.

// UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use DataTables;

class UserController extends Controller
{
   
    public function index(Request $request) {
        if ($request->ajax()) {
            $data = User::latest()->get();
            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');
    }
}

Laravel 6 Custom Login and Registration with Session

Add Route For Yajra DataTables

For the UserController, we will have to set the route for implementing the datatable laravel. We will need to add this route into the routes/web.php file.

// web.php

Route::get('users', ['uses'=>'UserController@index', 'as'=>'users.index']);

Once the route has been added you can serve the project.

php artisan serve

Conclusion

So through this post, we have completed a quick guide of datatable laravel. As we have seen the Laravel 6 provides the package for implementing the datatable. This is called Yajra DataTables. I hope this will help you to manage a large number of records in the form of a table. Also, it will help you from creating the custom code for these types of features.