Assalamualaikum / Hi,
Today I will share how to use Datatables in your Laravel project.
I will cover on:
- Setting up Datatables
- Compiling Datatables Asset with Laravel Mix
- Create route for Datatables
- Create reusable Blade Template for Datatable
Part 1: Installation
Create a new laravel project. Install
package.json dependencies with
npm install or
yarn install. Add Datatable and Datatable Bootstrap 4 –
yarn add datatables.net datatables.net-bs4 --dev.
--dev means that we only need this on development since we will compile it once and used the compiled version for our application.
webpack.mix.js and update the file as following.
npm run prod – this should create
The next thing you need to install is the Yajra Laravel Datatables –
composer require yajra/laravel-datatables:^1.0 and then run
php artisan vendor:publish --tag=datatables.
If you’re running on minimum of Laravel 5.5, thanks to package discovery. No need to setup
Part 2: Datatable Routes
In this part, I’m going to show how I manage Datatable routes.
The starting point is the
app/Providers/RouteServiceProvider.php. Open up the file and we will duplicate one of the method –
mapApiRoutes() – and name it as
routes/datatable.php file and we can start write datatable routes in the file. As you can see, with this method, your datatable routes will be much cleaner and organised in a separate route file.
This is just an approach to make your route file easier to maintain. The other option, you may use macro.
Following are the sample datatable route that we will use in this post.
<?php Route::get('user', 'UserController')->name('user');
Part 3: Basic Datatable Controller
In this part, I’ll show how I manage the controllers for datatables. As you can see from my
mapDatatableRoutes(), I have namespace for the datatable route to
AppHttpControllersDatatable. This approach just to make your datable controllers well organise.
You can create your first datatable controller with
php artisan make:controller Datatable/UserController and you can copy paste the basic setup of the datatable controller.
Part 4: View
In this part, I’ll show how I create basic datatable blade component that reusable – of course, you can use VueJs as well, but I’ll keep it simple for now.
By default, I have this
resources/views/components/table.blade.php, which I always use for table based view.
Now we are prepared with the requirements on datatable – Datatable JS & CSS, Laravel Datatable by Yajra, dedicated route and namespace to keep codes well organised. Next, we will test our setup.
Part 5: Final Countdown
We will list out users using datatable. Make sure to run
php artisan make:auth and add
Previously you have setup the route and controller. Next is to create a controller, route and a view to display the data from datatable. Following are the setup.
Create the controller –
php artisan make:controller UserController -r
Add route for the view in
Next (2 more steps!), seed some data with tinker
php artisan tinker, then
And finally, run
php artisan serve, the go the browser –
http://127.0.0.1/users, you have as the datatable display nicely!
So, as conclusion, the tedious part is to setup the requirement for the datatable. Once you’re done, you will probably will involved with creating route, controller for the datatable and view, and view for the controller view.
You can extend the datatable blade component based on your needs. As for me, for now, the basic setup is good enough.
Here the repository for this post example.
Should I create a package for this?
Thanks! Happy Coding!