DataTable and Laravel
- Tram Ho
1. Introduction:
Not sure how to display tabular data on your website? Are you having trouble with the <td> tags in the HTML table? This article will be a simple but effective solution for you!
Preview a board I built in just 3 minutes ^^
2. A brief overview of Data Table:
Data Table is a way to display tabular data on your website “dynamic” and “smarter” with HTML tables. It also allows users to perform simple operations such as searching, sorting, filtering, pagination and see the results right on the table interface without having to switch pages.
Technology used:
As the title says, this article is a solution for websites using the Laravel framework, and I will use some packages and plug-ins as below:
- Laravel 5.5+
- jQuery DataTables v1.10.x
- yajra/laravel-datatables: v1.5
3. Settings:
First, we need to install the jQuery DataTables plug-in, you can choose 1 of 3 settings that the developer offers:
CDN: We can easily import files into the project without installation as follows:
1 2 3 | <span class="token tag"><span class="token punctuation"><</span>link <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf8<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span> |
NPM: Run the following 2 commands and we can use datatables:
1 2 3 | npm install datatables.net npm install datatables.net-dt |
Bower: Bower is a very useful way of managing packages:
1 2 3 | bower install --save datatables.net bower install --save datatables.net-dt |
Next we need to install the Laravel-DataTables package with the composer command:
1 2 | composer require yajra/laravel-datatables-oracle |
And run the artisan command to publish the config:
1 2 | php artisan vendor:publish --tag=datatables |
That’s it, the installation is complete!
4. Demo and approaches:
Depending on the code style and requirements of the project in use, I offer two approaches as follows:
Using Datatables::make() and AJAX:
This will be pretty quick, but you’ll need a little bit of JavaScript handling:
Route: Declare route to get data in routes/app.php
:
1 2 | Route<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user-data'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'UserController@getData'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.data'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Controller: In the handler Controller, we use class Datatables
and process the code as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">use</span> <span class="token package">Yajra<span class="token punctuation">\</span>Datatables<span class="token punctuation">\</span>Datatables</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">UserController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'users.list'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$users</span> <span class="token operator">=</span> User<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">with</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'post'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> Datatables<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token variable">$users</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">make</span><span class="token punctuation">(</span><span class="token boolean constant">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
View: Add the following code in the view page views/users/list.blade.php
where you want to display the table:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>table-responsive<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">hidden</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ route('category.data') }}<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userData<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>table <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>table table-bordered<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userTable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>thead<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>tr<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>th<span class="token punctuation">></span></span>@lang('user.name')<span class="token tag"><span class="token punctuation"></</span>th<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>th<span class="token punctuation">></span></span>@lang('user.post')<span class="token tag"><span class="token punctuation"></</span>th<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>th<span class="token punctuation">></span></span>@lang('user.address')<span class="token tag"><span class="token punctuation"></</span>th<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>th<span class="token punctuation">></span></span>@lang('user.email')<span class="token tag"><span class="token punctuation"></</span>th<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>tr<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>thead<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>table<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> |
javaScript: Handling data retrieval and rendering with AJAX:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> urlData <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#userData'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#userTable'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">DataTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span> processing<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> serverSide<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> ajax<span class="token operator">:</span> urlData<span class="token punctuation">,</span> columns<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'post.name'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'post.name'</span><span class="token punctuation">,</span> defaultContent<span class="token operator">:</span> <span class="token string">"None"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'address'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'email'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'email'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Handling with DataTable Controller:
If you want to spend time learning more about Laravel-DataTables package, then I recommend you to use this method.
DataTable Controller: First we need to create a new DataTable Controller to handle the Table build:
1 2 | php artisan datatables:make Users |
Laravel will automatically create a new Controller at app/DataTables/UsersDataTable.php
, We proceed to add functions to handle table construction:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <span class="token keyword">use</span> <span class="token package">Yajra<span class="token punctuation">\</span>DataTables<span class="token punctuation">\</span>Html<span class="token punctuation">\</span>Column</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Yajra<span class="token punctuation">\</span>DataTables<span class="token punctuation">\</span>Services<span class="token punctuation">\</span>DataTable</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">UsersDataTable</span> <span class="token keyword">extends</span> <span class="token class-name">DataTable</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">dataTable</span><span class="token punctuation">(</span><span class="token variable">$query</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">datatables</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">eloquent</span><span class="token punctuation">(</span><span class="token variable">$query</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">addColumn</span><span class="token punctuation">(</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.name'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'{{ $name }}'</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">addColumn</span><span class="token punctuation">(</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.post'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'{{ $post[\'name\'] }}'</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">addColumn</span><span class="token punctuation">(</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.address'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'{{ $address }}'</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">addColumn</span><span class="token punctuation">(</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.email'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'{{ $email }}'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">query</span><span class="token punctuation">(</span>User <span class="token variable">$model</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token variable">$model</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">newQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">with</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'post'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">builder</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">setTableId</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'userTable'</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">columns</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">getColumns</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">minifiedAjax</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">dom</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Bfrtip'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">getColumns</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> Column<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> Column<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.post'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> Column<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.address'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> Column<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.email'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">filename</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token single-quoted-string string">'Users_'</span> <span class="token punctuation">.</span> <span class="token function">date</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'YmdHis'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Controller: Handle in UserController you just need the UsersDataTable dependency:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>DataTables<span class="token punctuation">\</span>UsersDataTable</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">UserController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">index</span><span class="token punctuation">(</span>UsersDataTable <span class="token variable">$dataTable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token variable">$dataTable</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">render</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'users.list'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
View: The display of the view is also handled more simply with the following code on the view page views/users/list.blade.php
:
1 2 3 4 5 6 7 | <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>card-body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> {{ $dataTable->table() }} <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token punctuation">{</span><span class="token punctuation">{</span> $dataTable<span class="token operator">-</span><span class="token operator">></span><span class="token function">scripts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span> |
And those are two approaches you can use when building tables with DataTables and Laravel DataTables.
5. Customize DataTable:
If you only display data as text, then there is nothing to worry about. But most of us would like to be able to add some kind of column or other functionality. Here are the ways to customize in the data table:
Index Column:
Index column with auto-incrementing sequence number defined in config/datatables.php
:
1 2 3 4 5 | <span class="token comment">/* * DataTables internal index id response column name. */</span> <span class="token single-quoted-string string">'index_column'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token single-quoted-string string">'DT_RowIndex'</span><span class="token punctuation">,</span> |
Index column with auto-incrementing sequence number defined in
1 2 3 4 | Datatables<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token variable">$users</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">addIndexColumn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">make</span><span class="token punctuation">(</span><span class="token boolean constant">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
And the name of the column will be DT_RowIndex
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> urlData <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#userData'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#userTable'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">DataTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span> processing<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> serverSide<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> ajax<span class="token operator">:</span> urlData<span class="token punctuation">,</span> columns<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'DT_RowIndex'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'DT_RowIndex'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'post.name'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'post.name'</span><span class="token punctuation">,</span> defaultContent<span class="token operator">:</span> <span class="token string">"None"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'address'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'email'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'email'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Raw Columns:
With the raw column option, we can customize the columns displayed with other HTML tags as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | Datatables<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token variable">$users</span><span class="token punctuation">)</span> <span class="token comment">//hiển thị avatar của user:</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">addColumn</span><span class="token punctuation">(</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.image'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$image</span> <span class="token operator">=</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">image</span> <span class="token operator">!=</span> <span class="token constant">null</span> <span class="token operator">?</span> <span class="token function">asset</span><span class="token punctuation">(</span><span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">image</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token function">asset</span><span class="token punctuation">(</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.image_default'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token single-quoted-string string">'<img class="img-fluid" src='</span> <span class="token punctuation">.</span> <span class="token variable">$image</span> <span class="token punctuation">.</span> <span class="token single-quoted-string string">'>'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">//lựa chọn chỉnh sửa:</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">addColumn</span><span class="token punctuation">(</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.edit'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token single-quoted-string string">'<a href="'</span> <span class="token punctuation">.</span> <span class="token function">route</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'users.edit'</span><span class="token punctuation">,</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">id</span><span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token single-quoted-string string">'" class="btn btn-info"><i class="fas fa-pen"></i></a>'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">rawColumns</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.edit'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'user.image'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">make</span><span class="token punctuation">(</span><span class="token boolean constant">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Searching:
We can also customize the search box in the Data Table with filter api
as follows:
1 2 3 4 5 6 7 8 9 10 11 | DataTables<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">eloquent</span><span class="token punctuation">(</span><span class="token variable">$users</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$query</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">has</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'like'</span><span class="token punctuation">,</span> <span class="token double-quoted-string string">"%"</span> <span class="token punctuation">.</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token double-quoted-string string">"%"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">has</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'email'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'email'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'like'</span><span class="token punctuation">,</span> <span class="token double-quoted-string string">"%"</span> <span class="token punctuation">.</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'email'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token double-quoted-string string">"%"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Ordering:
Similar to search, we can also not use the default ordering of the package, but customize it in our own way using order api
:
1 2 3 4 5 6 7 8 9 10 11 | DataTables<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">eloquent</span><span class="token punctuation">(</span><span class="token variable">$users</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">order</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$query</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">has</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'asc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">has</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'email'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'email'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
And there are many other options for customizing your table, as well as operations on the table. Readers can learn more at the package’s document to link below the reference.
6. Conclusion:
Thus, I have introduced to you some Data Table approaches with Laravel. Hope you can pick up a few skills when working with data tables in your Laravel project. Thank you for reading my post. If you have something to share or suggest, write it down in the comments section!