collin collin - 2 months ago 35
jQuery Question

Using a dropdown list to filter a table (dataTables)

I'm using the dataTables jQuery plugin (which is totally awesome), but I'm having trouble getting my table to filter based on the change of my select box.

Function:

$(document).ready(function() {
$("#msds-table").dataTable({
"sPaginationType": "full_numbers",
"bFilter": false
});

var oTable;
oTable = $('#msds-table').dataTable();

$('#msds-select').change( function() {
oTable.fnFilter( $(this).val() );
});
});


HTML:

<table border="0" cellpadding="0" cellspacing="0" id="msds-table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<select id="#msds-select">
<option>All</option>
<option>Group 1</option>
<option>Group 2</option>
<option>Group 3</option>
<option>Group 4</option>
<option>Group 5</option>
<option>Group 6</option>
</select>
<tr class="odd">
<td>Group 1</td>
<td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
<td><a href="#">Download</a></td>
</tr>
<tr class="even">
<td>Group 1</td>
<td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
<td><a href="#">Download</a></td>
</tr>
<tr class="odd">
<td>Group 1</td>
<td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
<td><a href="#">Download</a></td>
</tr>
</tbody>
</table>


Table goes on to display a bunch of items, up to "Group 6", but you get the idea.
Anyone ever tried to do this before?

Answer Source

dataTables features

I knew I had done this before, and you have to watch this little piece of information:

Note that if you wish to use filtering in DataTables this must remain 'true' - to remove the default filtering input box and retain filtering abilities, please use sDom.

you need to set {bFilter:true}, and move your <select></select> into a custom element registered through sDom. I can guess your code will look like this:

$(document).ready(function() {
      $("#msds-table").dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": true,
        "sDom":"lrtip" // default is lfrtip, where the f is the filter
       });
      var oTable;
      oTable = $('#msds-table').dataTable();

      $('#msds-select').change( function() { 
            oTable.fnFilter( $(this).val() ); 
       });
   });

your code for oTable.fnFilter( $(this).val() ); will not fire while {bFilter:false}; according to the documentation