Question

我在网上找到了此分页和过滤器搜索，都可以正常工作，但是我想做的是将这些集成在一起。因此，加载此页面后，分页将看起来像setValues()，然后我搜索<< [1][2] >>时，过滤器搜索结果将仅返回一个元素，则分页将看起来像Bob有帮助吗？

html

<<[1]>>

过滤器

<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: "«", nextText: "»", onPageClick: function (pageNumber) { var showFrom = perPage * (pageNumber - 1); var showTo = showFrom + perPage; items.hide().slice(showFrom, showTo).show(); } }); </script>插件。

Answer 1

在Myfunction（）调用中，破坏分页并再次重新生成分页。

$（'＃pagination-container'）。pagination（'destroy'）;

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

将过滤器搜索与分页集成

1 个答案: