Link install package here: https://yajrabox.com/docs/laravel-datatables/master/
In the HTML plugin we use Events/Callbacks to generate search inputs corresponding to each column and catch the search logic event of each input. the code will be as follows:
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 | 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); }", ]); } |
With the above code I use the event callback initComplete to run 2 pre-set js functions outside the view. The code of the two functions is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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(); }); }); } |
With the above js function, it will perform the function of rendering the inputs into columns 1, 2, 3 into the footer and catch the onchange event on each input to search with the keyword and return the records by keyword on each column. With the column.search($(this).val(), false, false, true).draw() paragraph, go to the datatable’s docs with detailed instructions.
Here to catch the keyword search by column, in the controller you have to use DI. the code is as follows
1 2 3 4 | public function index(BuildingDataTable $dataTable){ return $dataTable->render('view); } |
With class BuildingDataTable We create with instructions in the following link: https://yajrabox.com/docs/laravel-datatables/master/quick-starter
Good luck !