CODEWITHSUNDEEP
jquerytwitter-bootstrap
Liza
Liza

Reputation: 838

filter table with pagination

I want a table with pagination and at the same time search box in the table header. So use this code jsfiddle pagination

I want output like this: enter image description here

here is my code for filtering:

function searchCabinet() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("searchCabinet");
  filter = input.value.toUpperCase();

    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }       
     }
}

Upvotes: 3

Views: 10070

Answers (1)

Vanojx1
Vanojx1

Reputation: 5574

After each pagination filter the total number of rows like this:

$table.find('tbody tr').hide();
$filteredRows = $table.find('tbody tr').filter(function(i, tr) {
  return $('#search').val() != "" ? $(tr).find("td").get().map(function(td) {
    return $(td).text();
  }).filter(function(td){
    return td.indexOf($('#search').val()) != -1; 
  }).length > 0 : true;
});

then show rows of current page:

$filteredRows.slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();

and then change the number of pages:

var numRows = $filteredRows.length;
var numPages = Math.ceil(numRows / numPerPage);

check working fiddle

Upvotes: 1

Related Questions