Anyone know how to add a custom option select filter to a jQuery DataTable?
Basically, like this example page but instead of having min/max text fields... change them to select options.
Easier than I thought it would be:
Javascript
$(document).ready(function() {
/* Initialise datatables */
var oTable = $('#example').dataTable();
/* Add event listener to the dropdown input */
$('select#engines').change( function() { oTable.fnFilter( $(this).val() ); } );
} );
HTML
<select id="engines">
<option value="">- Select -</option>
<option value="1.8">1.8</option>
<option value="1.9">1.9</option>
</select>
You need to build a regular expression that will do it. Making a minimum or maximium is fairly easy. Trying to do both at the same time gets tricky. Here is one that will return all numbers 13+:
oTable.fnFilter("([1-9][3-9]|[2-9][0-9]|[0-9]{3,})", 1, true);
This says: 13-99 (excluding 20, 21, 22, 31, 32, etc) 20-99 100+
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With