Implementing Yajra DataTables in Laravel 10: A Step-by-Step Guide

Share this post on:

Welcome to our step-by-step guide on implementing Yajra DataTables in a Laravel 10 project. Yajra DataTables is a powerful library that seamlessly integrates the jQuery DataTables API with Laravel. It simplifies server-side operations using AJAX and supports Eloquent ORM, Fluent Query Builder, or Collection.

Follow along as we set up a Laravel project, install Yajra Datatables, create a model and migrations, generate dummy records, set up a controller, define routes, and finally, display records with a visually stunning table using Bootstrap.

Step 1: Install the Laravel App

Let’s start by creating a new Laravel project using Composer:

Step 2: Install Yajra Datatable Package

Next, we’ll install the Yajra DataTable plugin:

After installing, expand the foundational service by adding the service provider and alias in the config/app.php file:

Run the vendor publish command:

Step 3: Set Up the Model and Migrations

Generate a model and migration for the ‘blogs’ table:

Add the following code to the generated migration file:

In the app/Models/Blog.php file, add the following code:

Run the migration command:

Step 4: Generate Dummy Records

To test Yajra Datatables, let’s create dummy records using Faker. Open database/seeders/DatabaseSeeder.php and add the following code:

Run the seeder command:

Step 5: Create a Controller

Now, let’s create a controller for our Blog model:

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

Step 6: Create Routes

Create routes to display the data table in our view. Open routes/web.php and add the following code:

Step 7: Displaying Records with Laravel Yajra Datatables

Create the welcome.blade.php  file in resources/views/ and place the following code:

Finally, run the following command and view the result in your browser:

Visit http://<hostname>:<port>/ to see the Yajra Datatables in action!