Datatable are very handy and useful system that you may ever want to use in your existing panel and want to give more feature to your client. In Laravel there a package available for datatable that can be a life save and once you start using you will never let it go. So lets talk about Laravel JQuery Datatable package build by yajrabox.
Before start i assume you know how to install and configure your laravel simple project. After create a new project and setup your demo database with some dummy users or your data.
Laravel JQuery DataTable Example
First of all we need to install laravel/ui package (if your laravel version is >= 7) then you need to use bootstrap ui for finish this you need to follow below commands in your project terminal.
PowerShell
composer require laravel/ui --dev
php artisan ui bootstrap --authnow you need to add datatables asset via npm or yarn.
PowerShell
// for npm users
npm install --save datatables.net-bs4 datatables.net-buttons-bs4
// for yarn users
yarn add datatables.net-bs4 datatables.net-buttons-bs4now you add these assets to app.scss and bootstrap.js file
resources/js/bootstrap.js
JavaScript
require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');resources/scss/app.scss
CSS
// DataTables Assets
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";
@import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";after these all modification you need to compile assets. To complete this step you need to follow below commands in your project terminal
PowerShell
// for npm users
npm run dev / watch / prod
// for yarn users
yarn dev / watch / prodNow after this all you need to modify your master file that you extends in your blade files (eg. app.blade.php)
Master File Modification
You need to add some script file before closing </body> tags.
HTML
<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
@stack('scripts')After this you need to make a controller. Here we just use UserController for getting users data. So first we make a controller and also a datatables so we need to run some commands
PowerShell
php artisan make:controller UserController
php artisan datatables:make UsersAfter this we need to setup our controller and datatables.
PHP
<?php
namespace App\Http\Controllers;
use App\DataTables\UsersDataTable;
class UserController extends Controller
{
public function index(UsersDataTable $dataTable)
{
return $dataTable->render('users.index');
}
}Now we need to modify UsersDataTable.php file to show our column to front page for example we have created a sample here.
PHP
<?php
namespace App\DataTables;
use App\User;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;
class UsersDataTable extends DataTable
{
/**
* Build DataTable class.
*
* @param mixed $query Results from query() method.
* @return \Yajra\DataTables\DataTableAbstract
*/
public function dataTable($query)
{
return datatables()
->eloquent($query)
->rawColumns(['action'])
->editColumn('created_at', function(User $user){
return $user->created_at->format('d-m-Y');
})
->addColumn('action',function(User $user){
return '<button>Action</button>';
});
}
/**
* Get query source of dataTable.
*
* @param \App\User $model
* @return \Illuminate\Database\Eloquent\Builder
*/
public function query(User $model)
{
return $model->newQuery();
}
/**
* Optional method if you want to use html builder.
*
* @return \Yajra\DataTables\Html\Builder
*/
public function html()
{
return $this->builder()
->setTableId('users-table')
->columns($this->getColumns())
->minifiedAjax()
->dom('Bfrtip')
->orderBy(1)
->buttons(
Button::make('create'),
Button::make('export'),
Button::make('print'),
Button::make('reset'),
Button::make('reload')
);
}
/**
* Get columns.
*
* @return array
*/
protected function getColumns()
{
return [
Column::computed('action')
->exportable(false)
->printable(false)
->width(60)
->addClass('text-center'),
Column::make('id'),
Column::make('name'),
Column::make('email'),
Column::make('created_at')
];
}
/**
* Get filename for export.
*
* @return string
*/
protected function filename()
{
return 'Users_' . date('Y-m-dHis');
}
}now we edit our users/index.blade.php file
resources/views/users/index.blade.php
PHP
@extends('layouts.app')
@section('content')
{{$dataTable->table()}}
@endsection
@push('scripts')
{{$dataTable->scripts()}}
@endpushNow we need to add route in our routes/web.php file
routes/web.php
PHP
<?php
Route::get('/users', 'UsersController@index')->name('users.index');Before run you need to add some dummy data in your users table so to do that you can use seeder.
Now You run your project on your local.
Conclusion
So here we go now we can make our table more attractive and ourself more productive in minimum time thats why we are developers. 😂. So If you stuck anywhere just comment below and if you want to help your friend and developer just share it to him/her.
