javascript - 将过滤器搜索与分页集成

Question

我在网上发现了这个分页和过滤器搜索，两者都工作正常，但我想做的是我想将它们集成在一起。因此，当加载此页面时，分页将类似于 << [1][2] >>然后一旦我搜索 Bob过滤器搜索结果将仅返回一个元素，那么分页将类似于 <<[1]>>有什么帮助吗？

html

<input type="text" id="myInput" onkeyup="myFunction()"            
placeholder="Search for names..">

<ul id="myUL" class="list-wrapper">
  <li class="list-item"><a href="#">Adele</a></li>
  <li class="list-item"><a href="#">Agnes</a></li>
  <li class="list-item"><a href="#">Billy</a></li>
  <li class="list-item"><a href="#">Bob</a></li>

  <li class="list-item"><a href="#">Calvin</a></li>
  <li class="list-item"><a href="#">Christina</a></li>
  <li class="list-item"><a href="#">Cindy</a></li>
</ul>

过滤

<script>
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

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

分页

<script>
  var items = $(".list-wrapper .list-item");
    var numItems = items.length;
    var perPage = 4;

    items.slice(perPage).hide();

    $('#pagination-container').pagination({
        items: numItems,
        itemsOnPage: perPage,
        prevText: "&laquo;",
        nextText: "&raquo;",
        onPageClick: function (pageNumber) {
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;
            items.hide().slice(showFrom, showTo).show();
        }
    });
</script>

我正在使用simplePagination.js插件..

Answer 1

在 Myfunction() 调用中，销毁分页并再次重新生成分页。

$('#pagination-container').pagination('destroy');

$('#pagination-container').pagination({
        items: numItems,
        itemsOnPage: perPage,
        prevText: "«",
        nextText: "»",
        onPageClick: function (pageNumber) {
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;
            items.hide().slice(showFrom, showTo).show();
        }
    });