laravel

How to Implement DataTables Ajax with Laravel 5

Share this article

I’m writing a Laravel Inventory Management system tutorial right now.  I still unable to publish it yet. So, I decided to publish a short tutorial on how to implement Datatables Ajax with Laravel 5.

In my opinion, Datatables is really a good jQuery plugin compared to a normal table because you can do sorting and searching within the table without hassle. I also use Datatables in some of my previous project such as Room Booking System.

So here I will demonstrate on how to implement Datatables with Ajax data into your Laravel 5 application by creating a simple Contact Book application. Download link available at the end of this tutorial.

At the end of this tutorial, you may have something like this:

I start with a new project setup by running laravel command in my console.

laravel new datatables

Then we need to add Datatables package into our project, register it to service provider, and publish its config file. I use composer to get the necessary files. Make sure your console is in the main directory of your project.

composer require yajra/laravel-datatables-oracle:^7.0
php artisan vendor:publish --tag=datatables

Setup your database and update your env file with correct DB name, username and password.

DB_DATABASE=datatables
DB_USERNAME=root
DB_PASSWORD=password

Next, create model and migration file. For this tutorial, we will only use one table; contacts for us to retrieve the records.

php artisan make:model Contact -m

For the migration, I will create a column to store basic info i.e. name, email and phone number.

Schema::create('contacts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email');
            $table->string('phone');
        });

After that, create a seeder for contacts. I use factory to seed the dummy data for flexibility. You may refer to here for more detail documentation on how to use it.

php artisan make:seeder ContactsTableSeeder

Leave a Reply

Your email address will not be published. Required fields are marked *