title: Using a dropdown list to filter a table (dataTables)
body: <p>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.</p>
  
  <p>Function:</p>
  
  <pre><code>  $(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() ); 
         });
     });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;table border="0" cellpadding="0" cellspacing="0" id="msds-table"&gt;
                      &lt;thead&gt;
                        &lt;tr&gt;
                          &lt;th&gt;Column 1&lt;/th&gt;
                          &lt;th&gt;Column 2&lt;/th&gt;
                          &lt;th&gt;etc&lt;/th&gt;
                        &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;select id="#msds-select"&gt;
                      &lt;option&gt;All&lt;/option&gt;
                      &lt;option&gt;Group 1&lt;/option&gt;
                      &lt;option&gt;Group 2&lt;/option&gt;
                      &lt;option&gt;Group 3&lt;/option&gt;
                      &lt;option&gt;Group 4&lt;/option&gt;
                      &lt;option&gt;Group 5&lt;/option&gt;
                      &lt;option&gt;Group 6&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;tr class="odd"&gt;
                          &lt;td&gt;Group 1&lt;/td&gt;
                          &lt;td&gt;&lt;img src="images/modules/download-icon.gif" width="12" height="17" alt="" /&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;a href="#"&gt;Download&lt;/a&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="even"&gt;
                          &lt;td&gt;Group 1&lt;/td&gt;
                          &lt;td&gt;&lt;img src="images/modules/download-icon.gif" width="12" height="17" alt="" /&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;a href="#"&gt;Download&lt;/a&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="odd"&gt;
                          &lt;td&gt;Group 1&lt;/td&gt;
                          &lt;td&gt;&lt;img src="images/modules/download-icon.gif" width="12" height="17" alt="" /&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;a href="#"&gt;Download&lt;/a&gt;&lt;/td&gt;
                      &lt;/tr&gt;
       &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>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?</p>