Use Ajax with Laravel in server-side

In case you’ve been living under a rock 😜, is a JQuery JavaScript plugin that offer advanced interaction controls for the normal HTML tables. With datatables your normal html table can have pagination, search, sorting, ordering, exporting to various formats to name a few. The datatables can get data from various sources. Such as the html table or Ajax. Our focus on this article will be on Ajax DataTables.

Step 1: Installation

Lets create a new Laravel application and install few dependencies.

We are going to use yajrabox/laravel-datatables package. This package comes with all the boiler plate that we need, we will have to write very minimal code as the package abstracts and implements all requirements.

Step 2: Setup UI

For the front-end we are going to use datatables with the bootstrap theme. We need to scaffold UI, add datatables packages via npm.

Step 3: Build resources

We use laravel mix to build the JavaScript and CSS required. First add the datatables js to resources/js/bootstrap.js file.

Then add the datatables scss to the resources/scss/app.scss file.

Compile all the assets.

Step 4: Use the datatables

First step lets create a user controller to manage all the users, and a datatable class UserDatatable for managing the creation, structuring and syling the datatable. Each table is associated to a Model or query or collection.

In UsersController we are going IoC to get an instance of UsersDataTable, that will render the view also passing the variable $dataTable that will be used to create the HTML table and the JavaScript AJAX scripts to request the data from database.

In UsersDataTable we will define the simple columns that we are going to use for front-end DataTable and the package will handle the rest.

We are almost done, in your views/layouts/app.blade.php include the DataTables script.

Finally in your view file, add the DataTable scripts generator and table genarator. From there the HTML DataTable will be generated, having all the sweet sugary functionalities of

From there you have a fully working DataTable that fetches data directly from the server-side using ajax, and we don’t have to concern ourselves with writing complex ajax scripts, or defining the columns of the DataTable on the front end and the back end twice.

Sourced from

“The test of the machine is the satisfaction it gives you. There isn’t any other test. If the machine produces tranquility it’s right. If it disturbs you it’s wrong until either the machine or your mind is changed.”
Robert M. Pirsig, Zen and the Art of Motorcycle Maintenance: An Inquiry Into Values

Laravel 7 + Redis: Supercharge your Laravel application
Redis is one of those diamonds in the dirt most new Laravel Developers ignore when starting

Creating a Laravel 7.4.0 and Angular 9.2.1 web application
Recently I decided to create a laravel-angular application or pet project. The reasoffn being that I have been writing…