How To Integrate Yajra Datatables With Laravel 8 — Phpflow.com

2 min readOct 10, 2021

This Laravel 8 tutorial help to implement yajra datatble with laravel8. Yajra is awesome grid plugin for laravel which is based on jquery datatable. Its easy to integrate with laravel compared to datatable.

DataTables is a jQuery JavaScript library plug-in. It’s a powerful tool that adds all of these advanced features to any HTML table, thanks to its progressive enhancement basis.

Yajra Datatable

yajra is a jQuery DataTables API for Laravel 6/7/8. This plugin handles server-side works of DataTables jQuery plugin through AJAX option by considering the Eloquent ORM, Fluent Query Builder or Collection.

The main features of Yajra Datatable:

Pagination
Instant search
Multi-column ordering
Use almost any data source
Easily theme-able
Wide variety of extensions
Mobile friendly

How To Create laravel Listing Using Yajra

This Laravel 8 datatables tutorial help us the necessary methods for creating and displaying yajra datatables in Laravel 8.We’ll create employee module listing, sorting, searching with pagination.

Create Laravel application

Let’s create a laravel app using composer

composer create-project laravel/laravel laravel-app --prefer-dist

move to the laravel-app:

cd laravel-app

Install Laravel Yajra

The following command helps you installing the Yajra DataTable plugin in Laravel.

composer require yajra/laravel-datatables:^1.5

if you are working laravel below to 5.5 then you need add service provider in providers and alias inside the config/app.php file.

Configure Model and Migrations

Now, we’ll run below command to create a model, and it holds the schema of the database table.

php artisan make:model Employee -m

Open database/migrations/timestamp_create_employees_table.php file and add the given below code.

Let’s Open app/Models/Employee.php and updated the $fillable array.

Run migration using the following command.

php artisan migrate

Seeds Data

I m inserting data manually using sql script.

Create DataTable Controller

Create an EmpController that contains the fundamental functionality for handling data fetching and display requests from the database.

Create a controller using the below command.

php artisan make:controller EmpController

Open app/Http/Controllers/EmpController.php file and add the following code.

Define Route
You need to create a route, and display datatables template in the view for our laravel application.

Open routes/web.php and add the given code.

Display Data with Blade Template

We’ll create a view and display listing data using blade template.

Open resources/views/listing.blade.php file and place the following code.

The DataTable() method is defined, and the AJAX request is fetching the data from the server and displaying the name, age and salary with the help of Yajra DataTable package.

We’ve also set the orderable and searchable properties to true, so you can easily search the data and write your programme.

Run the following command and check on the browser.

php artisan serve

Open the below URL into the browser and check data:

http://127.0.0.1:8000/employee