DataTable và Laravel

Thứ Năm, 12/08/2021

Tram Ho

1. Giới thiệu:

Bạn đang không biết nên hiển thị dữ liệu dạng bảng lên website của mình như thế nào? Bạn đang đau đầu với những chiếc thẻ <td> trong HTML table? Bài viết này sẽ là giải pháp đơn giản nhưng hữu hiệu dành cho bạn!

Nhá trước một chiếc bảng mình dựng chỉ với 3 phút ^^

2. Sơ lược qua về Data Table:

Data Table là một cách hiển thị dữ liệu dạng bảng lên website của bạn “động” và “thông minh” hơn với bảng HTML table. Nó cũng cho phép người dùng thực hiện các thao tác đơn giản như tìm kiếm, sắp xếp, lọc, phân trang và thấy được kết quả ngay trên giao diện bảng mà không cần chuyển trang.

Công nghệ sử dụng:

Như tựa đề thì bài viết này là giải pháp dành cho các website sử dụng framework Laravel, và mình sẽ sử dụng một số package và plug-in như dưới đây:

Laravel 5.5+
jQuery DataTables v1.10.x
yajra/laravel-datatables: v1.5

3. Cài đặt:

Đầu tiên, ta cần cài đặt plug-in jQuery DataTables, bạn có thể lựa chọn 1 trong 3 cách cài đặt mà nhà phát triển đưa ra:

CDN: Ta có thể dễ dàng import các file vào project mà không cần cài đặt như sau:

<span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>script<span class="token punctuation">&gt;</span></span>

NPM: Chạy 2 câu lệnh dưới đây là ta đã có thể sử dụng datatables:

npm install datatables.net
npm install datatables.net-dt

npm install datatables.net

npm install datatables.net-dt

Bower: Bower là một cách quản lý các package rất đáng sử dụng:

bower install --save datatables.net
bower install --save datatables.net-dt

bower install --save datatables.net

bower install --save datatables.net-dt

Tiếp theo ta cần cài đặt package Laravel-DataTables bằng câu lệnh composer:

composer require yajra/laravel-datatables-oracle

1 2	composer require yajra/laravel-datatables-oracle

Và chạy câu lệnh artisan để publish config:

php artisan vendor:publish --tag=datatables

1 2	php artisan vendor:publish --tag=datatables

Như vậy đã hoàn tất việc cài đặt!

4. Demo và các hướng tiếp cận:

Tùy theo phong cách code và requirement của dự án đang dùng, mình đưa ra 2 cách tiếp cận như sau:

Sử dụng Datatables::make() và AJAX:

Cách này sẽ khá nhanh gọn lẹ nhưng bạn sẽ cần xử lý một chút với javaScript:

Route: Khai báo route để lấy dữ liệu trong routes/app.php:

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">&gt;</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>

Route::get('user-data', 'UserController@getData')->name('user.data');

Controller: Trong Controller xử lý, chúng ta use class Datatables và xử lý code như sau:

<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">&gt;</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">&gt;</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>

use Yajra\Datatables\Datatables;

class UserController extends Controller

{

public function index()

{

return view('users.list');

}

public function getData()

{

$users = User::with('post')->get();

return Datatables::of($users)

->make(true);

}

View: Thêm đoạn code sau ở trang view views/users/list.blade.php mà bạn muốn hiển thị table:

<span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token punctuation">&lt;</span>thead<span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token punctuation">&lt;</span>tr<span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token punctuation">&lt;</span>th<span class="token punctuation">&gt;</span></span>@lang('user.name')<span class="token tag"><span class="token punctuation">&lt;/</span>th<span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token punctuation">&lt;</span>th<span class="token punctuation">&gt;</span></span>@lang('user.post')<span class="token tag"><span class="token punctuation">&lt;/</span>th<span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token punctuation">&lt;</span>th<span class="token punctuation">&gt;</span></span>@lang('user.address')<span class="token tag"><span class="token punctuation">&lt;/</span>th<span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token punctuation">&lt;</span>th<span class="token punctuation">&gt;</span></span>@lang('user.email')<span class="token tag"><span class="token punctuation">&lt;/</span>th<span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token punctuation">&lt;/</span>tr<span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token punctuation">&lt;/</span>thead<span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token punctuation">&lt;/</span>table<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;/</span>div<span class="token punctuation">&gt;</span></span>

<thead>

<tr>

<th>@lang('user.address')</th>

<th>@lang('user.email')</th>

</tr>

</thead>

</table>

</div>

javaScript: Xử lý việc lấy dữ liệu và hiển thị với AJAX:

<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>

$(function () {

var urlData = $('#userData').val();

$('#userTable').DataTable({

processing: true,

serverSide: true,

ajax: urlData,

columns: [

{ data: 'name', name: 'name' },

{ data: 'post.name', name: 'post.name', defaultContent: "None" },

{ data: 'address', name: 'address' },

{ data: 'email', name: 'email' },

]

});

Xử lý với DataTable Controller:

Nếu bạn muốn dành thời gian tìm hiểu sâu hơn về package Laravel-DataTables thì mình recommend bạn nên dùng cách này.

DataTable Controller: Đầu tiên ta cần tạo mới một DataTable Controller để xử lý việc build Table:

php artisan datatables:make Users

1 2	php artisan datatables:make Users

Laravel sẽ tự động tạo mới Controller tại app/DataTables/UsersDataTable.php , ta tiến hành thêm các function xử lý việc dựng bảng:

<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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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>

use Yajra\DataTables\Html\Column;

use Yajra\DataTables\Services\DataTable;

class UsersDataTable extends DataTable

{

public function dataTable($query)

{

return datatables()

->eloquent($query)

->addColumn(__('user.name'), '{{ $name }}')

->addColumn(__('user.post'), '{{ $post[\'name\'] }}')

->addColumn(__('user.address'), '{{ $address }}')

->addColumn(__('user.email'), '{{ $email }}')

}

public function query(User $model)

{

return $model->newQuery()->with('post');

}

public function html()

{

return $this->builder()

->setTableId('userTable')

->columns($this->getColumns())

->minifiedAjax()

->dom('Bfrtip');

}

protected function getColumns()

{

return [

Column::make(__('user.name')),

Column::make(__('user.post')),

Column::make(__('user.address')),

Column::make(__('user.email')),

];

}

protected function filename()

{

return 'Users_' . date('YmdHis');

}

Controller: xử lý trong UserController bạn chỉ cần dependency UsersDataTable:

<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">&gt;</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>

use App\DataTables\UsersDataTable;

class UserController extends Controller

{

return $dataTable->render('users.list');

}

View: Việc hiển thị view cũng được xử lý đơn giản hơn với đoạn code sau ở trang view views/users/list.blade.php :

<span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
    {{ $dataTable-&gt;table() }}
<span class="token tag"><span class="token punctuation">&lt;/</span>div<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</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">&gt;</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">&lt;/</span>script<span class="token punctuation">&gt;</span></span>

</div>

{{ $dataTable->scripts() }}

</script>

Và đó là 2 cách tiếp cận bạn có thể dùng khi dựng bảng với DataTables và Laravel DataTables.

5. Tùy chỉnh DataTable:

Nếu chỉ hiển thị dữ liệu dạng text thì sẽ chẳng có gì quan ngại. Nhưng hầu hết chúng ta đều muốn có thể thêm vào một số dạng cột hay các chức năng khác nữa. Sau đây là những cách customize trong data table:

Index Column:

Cột index với số thứ tự tự động tăng được định nghĩa trong config/datatables.php:

<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">&gt;</span> <span class="token single-quoted-string string">'DT_RowIndex'</span><span class="token punctuation">,</span>

/*

* DataTables internal index id response column name.

*/

'index_column' => 'DT_RowIndex',

Ta sẽ thêm đoạn code sau để add cột index:

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">&gt;</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">&gt;</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>

Datatables::of($users)

->addIndexColumn()

Và tên của cột sẽ là DT_RowIndex :

<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>

processing: true,

serverSide: true,

ajax: urlData,

columns: [

{ data: 'DT_RowIndex', name: 'DT_RowIndex' },

]

});

Raw Columns:

Với lựa chọn raw column, ta có thể tùy chỉnh các cột hiển thị với các thẻ HTML khác như sau:

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">&gt;</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">&gt;</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">&gt;</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">'&lt;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">'&gt;'</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">&gt;</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">'&lt;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">&gt;</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"&gt;&lt;i class="fas fa-pen"&gt;&lt;/i&gt;&lt;/a&gt;'</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">&gt;</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">&gt;</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>

//hiển thị avatar của user:

->addColumn(__('user.image'), function ($user) {

$image = $user->image != null ? asset($user->image) : asset(config('user.image_default'));

return '<img class="img-fluid" src=' . $image . '>';

})

//lựa chọn chỉnh sửa:

->addColumn(__('user.edit'), function ($user) {

return '<a href="' . route('users.edit', $user->id) . '"

class="btn btn-info"></a>';

})

->rawColumns([__('user.edit'), __('user.image')])

Searching:

Ta cũng có thể customize cho ô search ở Data Table với filter api như sau:

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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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>

DataTables::eloquent($users)

->filter(function ($query) {

if (request()->has('name')) {

$query->where('name', 'like', "%" . request('name') . "%");

}

if (request()->has('email')) {

$query->where('email', 'like', "%" . request('email') . "%");

}

})

Ordering:

Tương tự như search, ta cũng có thể không sử dụng ordering mặc định của package mà custom theo cách riêng bằng việc sử dụng order api:

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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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>

->order(function ($query) {

$query->orderBy('name', 'asc');

}

if (request()->has('email')) {

$query->orderBy('email', 'desc');

}

})

Và còn rất nhiều lựa chọn khác cho việc customize cho bảng của bạn, cũng như các thao tác trên bảng. Bạn đọc có thể tìm hiểu kĩ hơn tại document của package mình để link dưới phần tham khảo.

6. Kết luận:

Như vậy, mình đã giới thiệu với các bạn một số cách tiếp cận Data Table với Laravel. Mong rằng các bạn có thể bỏ túi một vài kĩ năng khi làm việc với bảng dữ liệu trong project Laravel của mình. Cảm ơn các bạn đã đọc bài chia sẻ của mình. Nếu có điều gì chia sẻ hay góp ý, hãy viết lại dưới phần bình luận nhé!

Tài liệu tham khảo:

Chia sẻ bài viết ngay