Javascript 将筛选器搜索与分页集成

我发现这个分页和过滤搜索在线和工作都很好，但我想做的是我想把这些整合在一起。因此，当加载此页面时，分页将类似于

，然后一旦我搜索

Bob

，筛选搜索结果将只返回一个元素，那么分页将类似于

任何帮助

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>

函数myFunction（）{
//声明变量
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（'myInput'）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（'li'）；
//循环浏览所有列表项，并隐藏不匹配的项
搜索查询
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

分页

<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>

var items=$（“.list wrapper.list item”）；
var numItems=items.length；
每页var=4；
items.slice（perPage.hide（）；
$（“#分页容器”）。分页({
项目:numItems,，
每页，
前文：“«；”，
下一步：“»；”，
onPageClick:功能（页码）{
var showFrom=每页*（页码-1）；
var showTo=showFrom+每页；
items.hide（）.slice（showFrom，showTo）.show（）；
}
});

我正在使用

simplePagination.js

plug-in..

在Myfunction（）调用中，销毁分页并重新生成分页

$（“#分页容器”）。分页（'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();
        }
    });