Table filtering with paging
<p>Been working on a table that I want to apply filtering, which is fired from a select on change event. Which removes all of the rows that do not match the filtered value and then updates the paging.  At present, I can get the paging to work and filtering to work independent of each other.</p>

<p>Select Mark-up:</p>

<pre><code>                   &lt;select&gt;
                        &lt;option value="all"&gt;Show All&lt;/option&gt;
                        &lt;optgroup label="Programme Level"&gt;
                            &lt;option value="easy"&gt;Easy&lt;/option&gt;
                            &lt;option value="medium"&gt;Medium&lt;/option&gt;
                            &lt;option value="hard"&gt;Hard&lt;/option&gt;
                        &lt;/optgroup&gt;
                    &lt;/select&gt;
</code></pre>

<p>Table Mark-up:</p>

<pre><code>                &lt;table&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th&gt;Programme Level&lt;/th&gt;
                        &lt;th&gt;Title&lt;/th&gt;
                        &lt;th&gt;Summary&lt;/th&gt;&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                    &lt;tr&gt;
                        &lt;td&gt;Easy&lt;/td&gt;
                        &lt;td&gt;Title&lt;/td&gt;
                        &lt;td&gt;Short programme description goes here.&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;Hard&lt;/td&gt;
                        &lt;td&gt;Title&lt;/td&gt;
                        &lt;td&gt;Short programme description goes here.&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;Easy&lt;/td&gt;
                        &lt;td&gt;Title&lt;/td&gt;
                        &lt;td&gt;Short programme description goes here.&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;Medium&lt;/td&gt;
                        &lt;td&gt;Title&lt;/td&gt;
                        &lt;td&gt;Short programme description goes here.&lt;/td&gt;
                    &lt;/tr&gt;
        ...
                &lt;/tbody&gt;
            &lt;/table&gt;
</code></pre>

<p>Jquery to date:</p>

<pre><code>    &lt;script type="text/javascript"&gt;

$(document).ready(function() {

  //Code for select filter
  $('.sort select').change(function(){
      var KeyWord = $(this).val().toUpperCase();
      //find all rows which match value...
       $('table').each(function() {
          var $table = $(this);
          $('tr:not(:has(th))', $table).each(function(){
            var value = $('td', this).eq(0).text().toUpperCase();
            if(KeyWord != "ALL"){
                if(value == KeyWord){
                    $(this).show();
                }
                else{
                    $(this).hide();
                }
            }else{
                $(this).show();
            }
          });         
       });
  });

  //Code for Paging 
  $('table').each(function() {

    var currentPage = 0;
    var numPerPage = 6;
    var $table = $(this);
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);

    $table.bind('repaginate', function() {
      $table.find('tbody tr').hide()
        .slice(currentPage * numPerPage,
          (currentPage + 1) * numPerPage)
        .show();
    });

    $table.trigger('repaginate');//show correct number of rows on first page load

    if(numPages &gt; 1){ //if num of pages greater then 1, add paging
        var $pager = $('&lt;ul class="pagination"&gt;&lt;/ul&gt;');

        for (var page = 0; page &lt; numPages; page++) {
          $('&lt;li&gt;&lt;/li&gt;').text(page + 1)
            .bind('click', {newPage: page}, function(event) {
              currentPage = event.data['newPage'];
              $table.trigger('repaginate');
              $(this).addClass('active')
                .siblings().removeClass('active');
            }).appendTo($pager).addClass('clickable');
        }
        $pager.insertAfter($table).find('li').eq(0).addClass('active');//Insert paging after table and first page as active     
    }

  });

});

&lt;/script&gt;
</code></pre>

<p>If possible I would love some help or advice on how to update the above code, so that the paging is updated to reflect the number of filtered items.</p>

<p>Any help or pointers would be greatly appreciated.</p>

<p>Thanks</p>

<p>Eddie</p>
