Таблица фильтрации с подкачкой

Question

Работала над таблицей, которую я хочу применить для фильтрации, которая запускается из события select on change. Которая удаляет все строки, которые не соответствуют фильтруемому значению, а затем обновляет пейджинг. В настоящее время я могу заставить пейджинг работать и фильтровать, чтобы работать независимо друг от друга.

Выберите Наценка:

    <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> 
       <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 на сегодняшний день:

<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> 

Если возможно, я хотел бы некоторую помощь или совет о том, как чтобы обновить вышеуказанный код, чтобы обновить пейджинг, чтобы отобразить количество фильтрованных элементов.

Любые помощь или указатели будут очень признательны.

Благодаря

Эдди

Answer 1

Я думаю, вы должны серьезно рассмотреть вопрос об использовании TableSorter Jquery плагин, так как это хорошо документированы и хорошо отлажена решение сортировочных таблиц. Вот их постраничное решение:

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

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