jQuery DataTables plugin -- adding a custom option select filter

Question

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.

Solution 1

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>

Solution 2

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+