Table filtering with paging

Question

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.

Select Mark-up:

                   <select>
                        <option value="all">Show All</option>
                        <optgroup label="Programme Level">
                            <option value="easy">Easy</option>
                            <option value="medium">Medium</option>
                            <option value="hard">Hard</option>
                        </optgroup>
                    </select>

Table Mark-up:

                <table>
                <thead>
                    <tr>
                        <th>Programme Level</th>
                        <th>Title</th>
                        <th>Summary</th>>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Easy</td>
                        <td>Title</td>
                        <td>Short programme description goes here.</td>
                    </tr>
                    <tr>
                        <td>Hard</td>
                        <td>Title</td>
                        <td>Short programme description goes here.</td>
                    </tr>
                    <tr>
                        <td>Easy</td>
                        <td>Title</td>
                        <td>Short programme description goes here.</td>
                    </tr>
                    <tr>
                        <td>Medium</td>
                        <td>Title</td>
                        <td>Short programme description goes here.</td>
                    </tr>
        ...
                </tbody>
            </table>

Jquery to date:

    <script type="text/javascript">

$(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 > 1){ //if num of pages greater then 1, add paging
        var $pager = $('<ul class="pagination"></ul>');

        for (var page = 0; page < numPages; page++) {
          $('<li></li>').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     
    }

  });

});

</script>

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.

Any help or pointers would be greatly appreciated.

Thanks

Eddie

Answer 1

I think you should seriously consider using the tablesorter Jquery plugin since it is a well-documented and well-debugged solution to sorting tables. Here is their paginated solution:

$(document).ready(function() { 
    $("table") 
    .tablesorter({widthFixed: true, widgets: ['zebra']}) 
    .tablesorterPager({container: $("#pager")}); 
}); 

http://tablesorter.com/docs/example-pager.html