CODEWITHSUNDEEP
javascriptjqueryfilterpagination
js_beginner
js_beginner

Reputation: 95

Integrate filter search with paginations

I found this pagination and filter search online and both work fine but what I am trying to do is I would like to integrate these together. So, when this page is loaded, the pagination will look like something << [1][2] >> then once I search Bob the filter search result will return only one element then the pagination is going to look like <<[1]>> any help?

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>

filter

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

pagination

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

I am using simplePagination.js plug-in..

Upvotes: 0

Views: 1771

Answers (1)

Prashant Patil
Prashant Patil

Reputation: 2563

In Myfunction() call, destroy the pagination and regenerate the pagination again.

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

Upvotes: 1

Related Questions