Dropdown select filter not working on server side
Dropdown select filter not working on server side
A77ak
Posts: 2Questions: 2Answers: 0
I have a datatable loaded with server side working fine. Now I want to add some column filter (those with filter class) but is not working.
Here is my html:
<div class="data-table">
<table id="js-table" class="table">
<thead>
<tr>
<th class="filter">Col1</th>
<th class="filter">Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
</tr>
</thead>
</table>
<div class="selects"></div>
</div>
And my js:
var $tableCon = $('.data-table:eq('+ 1 +')');
var $table = $tableCon.find('.table');
var dataTable = $('#js-table').DataTable( {
"processing": true,
"serverSide": true,
"bFilter": false,
"ordering": false,
"bLengthChange": false,
"ajax": "/agetdatatable",
},
initComplete: function(){
$tableCon.find('.selects').insertBefore($('#js-table'))
var counter = 0;
dataTable.columns('.filter').every( function (e) {
var column = this;
$tableCon.find('.selects').append('<div class="select-holder"><label><span class="label">'+ $table.find('thead th:eq('+ e +')').html() +'</span><select><option value="">- All -</option></select></label>');
var select = $tableCon.find('.selects .select-holder:eq('+ counter +') select')
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false );
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
counter++;
} );
}
} );
The dropdown select is loading well, but when I click on it datatable is not refreshing.
Any help would be helpful
This discussion has been closed.