Javascript 尝试在筛选表行时调整分页

当我按客户编号筛选时，我正在尝试使用分页来调整页数。当我搜索客户编号时，CYR应该将分页调整为1页，但它似乎在计算页面负载上的页面

以下是filterCust函数：

function filterCust() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("custfilter");
  filter = input.value.toUpperCase();
  table = document.getElementById("invtable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

函数filterCust（）{
//声明变量
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“custfilter”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“invtable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}

这是分页脚本

/* PAGINATION SCRIPT */
// Returns an array of maxLength (or less) page numbers
// where a 0 in the returned array denotes a gap in the series.
// Parameters:
//   totalPages:     total number of pages
//   page:           current page
//   maxLength:      maximum size of returned array
function getPageList(totalPages, page, maxLength) {
  if (maxLength < 5) throw "maxLength must be at least 5";

  function range(start, end) {
    return Array.from(Array(end - start + 1), (_, i) => i + start);
  }

  var sideWidth = maxLength < 9 ? 1 : 2;
  var leftWidth = (maxLength - sideWidth * 2 - 3) >> 1;
  var rightWidth = (maxLength - sideWidth * 2 - 2) >> 1;
  if (totalPages <= maxLength) {
    // no breaks in list
    return range(1, totalPages);
  }
  if (page <= maxLength - sideWidth - 1 - rightWidth) {
    // no break on left of page
    return range(1, maxLength - sideWidth - 1)
      .concat([0])
      .concat(range(totalPages - sideWidth + 1, totalPages));
  }
  if (page >= totalPages - sideWidth - 1 - rightWidth) {
    // no break on right of page
    return range(1, sideWidth)
      .concat([0])
      .concat(
        range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages)
      );
  }
  // Breaks on both sides
  return range(1, sideWidth)
    .concat([0])
    .concat(range(page - leftWidth, page + rightWidth))
    .concat([0])
    .concat(range(totalPages - sideWidth + 1, totalPages));
}

$(function() {
  // Number of items and limits the number of items per page
  var numberOfItems = $("#invtable .content").length;
  var limitPerPage = 8;
  // Total pages rounded upwards
  var totalPages = Math.ceil(numberOfItems / limitPerPage);
  // Number of buttons at the top, not counting prev/next,
  // but including the dotted buttons.
  // Must be at least 5:
  var paginationSize = 7;
  var currentPage;

  function showPage(whichPage) {
    if (whichPage < 1 || whichPage > totalPages) return false;
    currentPage = whichPage;
    $("#invtable .content")
      .hide()
      .slice((currentPage - 1) * limitPerPage, currentPage * limitPerPage)
      .show();
    // Replace the navigation items (not prev/next):
    $(".pagination li").slice(1, -1).remove();
    getPageList(totalPages, currentPage, paginationSize).forEach(item => {
      $("<li>")
        .addClass(
          "page-item " +
          (item ? "current-page " : "") +
          (item === currentPage ? "active " : "")
        )
        .append(
          $("<a>")
          .addClass("page-link")
          .attr({
            href: "javascript:void(0)"
          })
          .text(item || "...")
        )
        .insertBefore("#next-page");
    });
    return true;
  }

  // Include the prev/next buttons:
  $(".pagination").append(
    $("<li>").addClass("page-item").attr({
      id: "previous-page"
    }).append(
      $("<a>")
      .addClass("page-link")
      .attr({
        href: "javascript:void(0)"
      })
      .text("Prev")
    ),
    $("<li>").addClass("page-item").attr({
      id: "next-page"
    }).append(
      $("<a>")
      .addClass("page-link")
      .attr({
        href: "javascript:void(0)"
      })
      .text("Next")
    )
  );
  // Show the page links
  $("#invtable").show();
  showPage(1);

  // Use event delegation, as these items are recreated later
  $(
    document
  ).on("click", ".pagination li.current-page:not(.active)", function() {
    return showPage(+$(this).text());
  });
  $("#next-page").on("click", function() {
    return showPage(currentPage + 1);
  });

  $("#previous-page").on("click", function() {
    return showPage(currentPage - 1);
  });
  $(".pagination").on("click", function() {
    $("html,body").animate({
      scrollTop: 0
    }, 0);
  });
});

/*分页脚本*/
//返回maxLength（或更小）页码的数组
//其中，返回数组中的0表示序列中的间隙。
//参数：
//totalPages：总页数
//页面：当前页面
//maxLength:返回数组的最大大小
函数getPageList（totalPages、page、maxLength）{
如果（maxLength<5）抛出“maxLength必须至少为5”；
功能范围（开始、结束）{
返回数组.from（数组（end-start+1），（u，i）=>i+start）；
}
var sideWidth=最大长度<9？1:2；
var leftWidth=（maxLength-sideWidth*2-3）>>1；
var rightWidth=（maxLength-sideWidth*2-2）>>1；
如果（totalPages totalPages）返回false；
currentPage=whichPage；
$（“#invtable.content”）
.hide（）
.slice（（当前页-1）*限制页，当前页*限制页）
.show（）；
//更换导航项（不是上一个/下一个）：
$（“.pagination li”）.slice（1，-1.remove（）；
getPageList（totalPages，currentPage，paginationSize）.forEach（item=>{
$（“
”）
.addClass(
“页面项目”+
（项目？“当前页”：“”）+
（项目===当前页面？“活动”：“”）
)
.附加(
$（“格式对JSFIDLE来说有点陌生

提前谢谢

Ralph
您的示例fiddle根本无法过滤-两个客户都保留在列表中。似乎不止一个问题。如果您键入CYR，您应该会看到3，它对我有效？？单击第2页或第3页，等等。另一个会出现。如果您继续，我可以“过滤”“然后像根本没有过滤器一样将它们全部取回。您可能也应该纠正与Popper相关的JavaScript运行时异常！是的，这就是为什么我需要在筛选客户时调整页数的原因。如果在筛选CYR客户后只显示一页，那么应该可以正常工作。”。