Link install package ở đây: https://yajrabox.com/docs/laravel-datatables/master/
Trong phần plugin HTML chúng ta sử dụng Events/Callbacks để tạo các input search tương ứng với mỗi column và bắt sự kiện logic search của từng input. code sẽ như sau:
public function html() { $this->instanceHtml = $this->builder() ->setTableId('buildingTable') ->columns($this->getColumns()) ->minifiedAjax() ->dom('Blfrtip'); $this->htmlParameters(); return $this->instanceHtml; } protected function htmlParameters(){ $this->instanceHtml = $this->instanceHtml ->parameters([ // 'responsive' => true, 'ordering' => false, 'autoWidth' => false, 'initComplete' => "function () { searchColumsDataTable(this); }", ]); }
Với đoạn code trên tôi sử dụng event callback initComplete để chạy 2 function js được setup sẵn ngoài view. code của 2 function như sau:
function searchColumsDataTable(datatable) { datatable.api().columns([1, 2, 3]).every(function () { var column = this; var input = document.createElement("input"); input.setAttribute('placeholder', 'Nhập từ khóa'); input.setAttribute('class', 'form-control'); $(input).appendTo($(column.footer()).empty()) .on('change', function () { column.search($(this).val(), false, false, true).draw(); }); }); }
Với function js ở trên nó sẽ thực hiện chức năng render các input vào các column 1, 2, 3 vào footer và bắt sự kiện onchange trên mỗi input để search với keyword và trả về các record theo keyword trên mỗi column. Với đoạn column.search($(this).val(), false, false, true).draw() bạn vào docs của datatable có hướng dẫn chi tiết nhé.
Tới đây để bắt được các keyword search theo column thì trong controller các bạn phải dùng DI. code như sau
public function index(BuildingDataTable $dataTable){ return $dataTable->render('view);
}
Với class BuildingDataTable Chúng ta tạo với hướng dẫn ở link sau: https://yajrabox.com/docs/laravel-datatables/master/quick-starter
Chúc các bạn thành công !