过滤表与分页

Question

我想要一个带有分页的表，同时在表头中搜索框。因此，请使用此代码jsfiddle pagination

我想要这样的输出：

这是我的过滤代码：

function searchCabinet() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("searchCabinet");
  filter = input.value.toUpperCase();

    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }       
     }
}

Answer 1

在每个分页后过滤总行数，如下所示：

$table.find('tbody tr').hide();
$filteredRows = $table.find('tbody tr').filter(function(i, tr) {
  return $('#search').val() != "" ? $(tr).find("td").get().map(function(td) {
    return $(td).text();
  }).filter(function(td){
    return td.indexOf($('#search').val()) != -1; 
  }).length > 0 : true;
});

然后显示当前页面的行：

$filteredRows.slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();

然后更改页数：

var numRows = $filteredRows.length;
var numPages = Math.ceil(numRows / numPerPage);

检查工作fiddle