分页式过滤桌 [英] filter table with pagination

问题描述

我想要一个带有分页的表，并且同时在表标题中有一个搜索框.因此，请使用此代码 jsfiddle分页

I want a table with pagination and at the same time search box in the table header. So use this code jsfiddle pagination

我想要这样的输出:

I want output like this:

这是我的过滤代码:

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";
          }
        }       
     }
}

推荐答案

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

After each pagination filter the total number of rows like this:

$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;
});

然后显示当前页面的行:

then show rows of current page:

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

，然后更改页数:

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

检查工作正常小提琴

这篇关于分页式过滤桌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！