Dropdown filter jquery datatables
You can also create your own select list and position it anywhere you like outside the table.
<select id="mySelect">
<option value="">Select</option>
<option value="1">1</option>
...
</select>
<script>
$('#mySelect').on('change',function(){
var selectedValue = $(this).val();
oTable.fnFilter("^"+selectedValue+"$", 0, true); //Exact value, column, reg
});
</script>
Maybe times have changed, but with no plugin and using dataTables 1.10.12
and it's @api
, as a person in the comments suggested, you can use the zero based index integer from an array for the corresponding table. Example code, important bits are on line 2
below. I'm searching just on the 4th column, and this is coffeescript but you get the idea.
$('#example').DataTable initComplete: ->
@api().columns([3]).every ->
column = this
select = $('<select><option value="">Sort Column(All)</option></select>').appendTo($(column.header()).empty()).on('change', ->
val = $.fn.dataTable.util.escapeRegex($(this).val())
column.search(val ? '^'+val+'$' : '', true, false).draw()
return
)
column.data().unique().sort().each (d, j) ->
select.append '<option value="' + d + '">' + d + '</option>'
return
return
return
If you need only on one column you could do
var indexOfMyCol = 2;//you want it on the third column
$("thead th").each( function ( i ) {
if(i === indexOfMyCol){
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
}
} );