Интегрируйте фильтр поиска с нумерацией страниц - PullRequest
Новая
       17

Интегрируйте фильтр поиска с нумерацией страниц

0 голосов
/ 22 мая 2019

Я нашел этот поиск по страницам и фильтрам в Интернете, и оба прекрасно работают, но я пытаюсь объединить их вместе. Таким образом, когда эта страница загружена, нумерация страниц будет выглядеть примерно как << [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 плагин ..

1 Ответ

1 голос
/ 22 мая 2019

В вызове 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();
        }
    });
...