Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery DataTables plugin -- adding a custom option select filter

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.

like image 490
Jeffrey Avatar asked Dec 06 '22 02:12

Jeffrey


2 Answers

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>
like image 54
Jeffrey Avatar answered Mar 01 '23 01:03

Jeffrey


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+

like image 28
MetalKid Avatar answered Mar 01 '23 03:03

MetalKid