LeMoussel LeMoussel - 1 month ago 17
jQuery Question

How to use Select box outside to filter dataTables?

I'm using the DataTables Table plug-in for jQuery but I'm having trouble
getting the global input search box would be an select box.

With the sDOM option

lrtip
, filtering input is not show but is
it possible to display select box and getting the datatable to filter based on the change of the select box?

JS:

$(document).ready(function() {
var table = $('#table_page').DataTable( {
paging: true,
ordering: false,
info: true,
searching: true,
sDom: "lrtip" // default is lfrtip, where the f is the filter
});
});


HTML:

<table id="table_page" class="display cell-border" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
</table>

Answer

You can use search() API method to perform global search programmatically and dom option to disable built-in search control.

For example:

var table = $('#example').DataTable({
   dom: 'lrtip'
});

$('#table-filter').on('change', function(){
   table.search(this.value).draw();   
});

See this example for code and demonstration. See this example, if you want to replace default search box.