Mình đã trang bị datatables như thế nào vào app php laravel

Chắc hẳn không còn ai xa lạ gì với datatables. một công cụ vô cùng hữu ích. Từ khi dùng nó mình cảm thấy kiệm ước được khá nhiều thời gian và không những vậy mình không cần phải quan tâm nhiều đến search, filter, hay paginate nữa. Một công cụ tuyệt vời.

Giới thiệu

Package

Nếu bạn dùng laravel để lập trình viênelopment app thì đây sẽ là một package khá hay
https://github.com/yajra/laravel-datatables

Nó giúp đỡ tất cả cho phía Server side của bạn version PHP tối thiểu để dùng nó phải từ PHP 5.6.4 trở lên.

Installs

Cài đặt vô cùng dễ làm

$ composer require yajra/laravel-datatables-oracle 

Package sẽ tự động install version mới nhất cho app của bạn. Trong file config/app.php
Hãy include các thư viện sau

providers

Yajra\Datatables\DatatablesServiceProvider::class 

aliases

'Datatables' => yajra\Datatables\Datatables::class, 

thêm nữa nếu bạn muốn config cá nhân thì có thể publish file config của nó

$ php artisan vendor:publish 

Vậy là xong các bước gắn vào package đã xong giờ đây mình sẽ đi thực hiện vào dùng nó như thế nào cho có tác dụng nhất.

dùng

Server side

Ở phía server side mình đã thấy nhiều bạn dùng datatable nhưng chỉ dùng engines collectionEngine của nó mà không dùng eloquentEngine dùng collection thì sẽ rất nhanh nhưng đôi khi các bạn vẫn muốn query trực tiếp trong database thì sao. Có nhiều câu query khó mà đôi khi collection không thể cung ứng đủ.
Ở Controller của mình trong method index mình sẽ viết như sau với Eloquent của mình là bảng Post

public function index(Request $request)    {        if ($request->ajax() && $request->has('datatables')) {            $params = $request->all();            $datatables = \Datatables::of(app(\App\Post::class)->query());            $this->filterDatatable($datatables, $params, function ($query, $params) {                if (array_has($params, 'category_ids') && $params['category_ids']) {                    $query->byCategories($params['category_ids']);                }            });             return $datatables->make(true);        }         return $this->viewRender();    } 

Trong method trên mình có gọi tới 1 method filterDatatable Method này chức năng của mình là để tách riêng việc tìm kiếm sang 1 method khác cho dễ quản lý. Method đó của mình như sau

//use Yajra\Datatables\Engines\EloquentEngine;  protected function filterDatatable(EloquentEngine $datatables, array $params, callable $callback = null)    {        return $datatables->filter(function ($query) use ($params, $callback) {            if (array_has($params, 'keyword')) {                $query->byKeyword($params['keyword']);            }            if (is_callable($callback)) {                call_user_func_array($callback, [$query, $params]);            }        });    } 

Mình dùng callback mục đích là có thể tùy biến filter từ method index và method filterDatatable của mình sẽ được tái dùng lại nhiều lần
ở đây các bạn thấy mình có dùng 2 scope trong eloquent là byKeywordbyCategories
Controller của mình chỉ có vậy nếu các bạn để ý kỹ thì mình viết như vậy để tuân thủ quy tắc DRY
chức năng của mình đã hoàn thành mình đưa hết các câu truy vấn query vào trong model bởi vì chức năng của model là làm những việc đó chứ ko phải Controller

Scope in Eloquent

Trong file app/Post.php mình có 2 method scope cho việc filter như sau
byKeyword

public function scopeByKeyword($query, $keyword)    {        return $query->where('name', 'LIKE', "{$keyword}%")            ->orWhere('content', 'LIKE', "{$keyword}%");    } 

byCategories

public function scopeByCategories($query, $categories)    {        return $query->whereHas('categories', function ($query) use ($categories) {            return $query->whereIn('ids', $categories);        });    } 

Vậy là ở phía server side mình đã hoàn thành việc đổ data và filter dùng eloquentEngine còn phía client side thì sao

Client side

Mình sẽ dùng bộ thư viện https://datatables.net/

<script src="vendor/datatables/js/jquery.dataTables.min.js"></script> <script src="vendor/datatables-bs/js/dataTables.bootstrap.min.js"></script> 

options datatable của mình sẽ như sau

$("#table-index").DataTable({     processing: true,     serverSide: true,     chức năng cung ứng: true,     searching: false,     ajax: $.extend({        url: '/server-side/post?datatable=1')      }, {      data: function(d) {          d.keyword = $('input[name=keyword]').val();      }      }) }); 

Vậy mỗi khi cần filter data client sẽ truyền params lên và server của mình sẽ query trực tiếp

Kết luận

Về thực tế mình thấy datatable rất hữu dụng. Nó giúp đỡ cho các bạn hầu như tất cả mọi thứ từ phân trang cho đến tìm kiếm và nó còn cho performance cực kỳ cao. chức năng của bạn cho phần filter gần như nó đã làm hết. Hi vọng với bài chỉ dẫn cơ bản này sẽ giúp đỡ các bạn có thêm được nhiều kinh nghiệm hơn để làm việc với tuyệt kỹ Read trong CRUD của mình.

Nguồn viblo.asia