JQuery pagination not working with filtering

Question

I am writing to seek help as i'm encountering some troubles with my university coursework.

Basically I have created a JQuery pagination and JQuery filtering. Individually they work fantastically, however if I start filtering and let's say my pagination limits me to 5 results at one time i then go back to the full amount (eg. 12) when I start typing.

I also have to write a sorting functionality to this aswell and i fear I will encounter the same issue. I think I need to be integrating them together much better.

Here i provide a link to my JS fiddle: http://jsfiddle.net/u7unm9zy/1/ (best way to check filtering is by typing 1 into the search box)

HTML

JQuery

$('table').each(function () {
  var currentPage = 0;
  var numPerPage = 5;
  var $table = $(this);

  $table.bind('repaginate', function () {
    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
  });
  $table.trigger('repaginate');

  var numRows = $table.find('tbody tr').length;
  var numPages = Math.ceil(numRows / numPerPage);
  var $pager = $('');
  $('<').bind('click', function (event) {
    currentPage = 0;
    $table.trigger('repaginate');
    $('span.page-number').each(function () {
      if (parseInt($(this).text()) == 1) {
        $(this).addClass('active')
      } else {
        $(this).removeClass('active');
      }
    });
    if (currentPage == 0) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('.prev').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('.prev').remove('disabled');
    }
    if (currentPage == numPages - 1) {
      $(this).parents('.pager').children('span.next').addClass('disabled');
      $(this).parents('.pager').children('span.last').addClass('disabled');
    } else {
      $(this).parents('.pager').children('span.next').removeClass('disabled');
      $(this).parents('.pager').children('span.last').removeClass('disabled');
    }
  }).appendTo($pager);
  $('<<').bind('click', function (event) {
    if ((currentPage - 1) >= 0) {
      currentPage = currentPage - 1;
      $table.trigger('repaginate');
      $('span.page-number').each(function () {
        if (parseInt($(this).text()) - 1 == currentPage) {
          $(this).addClass('active')
        } else {
          $(this).removeClass('active');
        }
      });
    }
    if (currentPage == 0) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('.first').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('.first').removeClass('disabled');
    }
    if (currentPage == numPages - 1) {
      $(this).parents('.pager').children('span.next').addClass('disabled');
      $(this).parents('.pager').children('span.last').addClass('disabled');
    } else {
      $(this).parents('.pager').children('span.next').removeClass('disabled');
      $(this).parents('.pager').children('span.last').removeClass('disabled');
    }
  }).appendTo($pager);
  for (var page = 0; page < numPages; page++) {
    $('').text(page + 1).bind('click', {
      newPage: page
    }, function (event) {
      currentPage = event.data['newPage'];
      $table.trigger('repaginate');
      $(this).addClass('active').siblings().removeClass('active');

      if (event.data['newPage'] == 0) {
        $(this).parents('.pager').children('span.prev').addClass('disabled');
        $(this).parents('.pager').children('span.first').addClass('disabled');
      } else {
        $(this).parents('.pager').children('span.prev').removeClass('disabled');
        $(this).parents('.pager').children('span.first').removeClass('disabled');
      }
      if (event.data['newPage'] == numPages - 1) {
        $(this).parents('.pager').children('span.next').addClass('disabled');
        $(this).parents('.pager').children('span.last').addClass('disabled');
      } else {
        $(this).parents('.pager').children('span.next').removeClass('disabled');
        $(this).parents('.pager').children('span.last').removeClass('disabled');
      }
    }).appendTo($pager).addClass('clickable');
  }
  $pager.insertAfter($table).find('span.page-number:first').addClass('active');
  $('>').bind('click', function (event) {
    if ((currentPage + 1) <= numPages) {
      currentPage = currentPage + 1;
      $table.trigger('repaginate');
      $('span.page-number').each(function () {
        if (parseInt($(this).text()) - 1 == currentPage) {
          $(this).addClass('active')
        } else {
          $(this).removeClass('active');
        }
      });
    }
    if (currentPage == numPages - 1) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('span.last').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('span.last').removeClass('disabled');
    }
    if (currentPage == 0) {
      $(this).parents('.pager').children('.prev').addClass('disabled');
      $(this).parents('.pager').children('.first').addClass('disabled');
    } else {
      $(this).parents('.pager').children('.prev').removeClass('disabled');
      $(this).parents('.pager').children('.first').removeClass('disabled');
    }
  }).appendTo($pager);
  $('>>').bind('click', function (event) {
    currentPage = numPages - 1;
    $table.trigger('repaginate');
    $('span.page-number').each(function () {
      if (parseInt($(this).text()) == numPages) {
        $(this).addClass('active')
      } else {
        $(this).removeClass('active');
      }
    });
    if (currentPage == numPages - 1) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('span.next').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('span.next').remove('disabled');
    }
    if (currentPage == 0) {
      $(this).parents('.pager').children('.prev').addClass('disabled');
      $(this).parents('.pager').children('.first').addClass('disabled');
    } else {
      $(this).parents('.pager').children('.prev').removeClass('disabled');
      $(this).parents('.pager').children('.first').removeClass('disabled');
    }
  }).appendTo($pager);
  if (currentPage == 0) {
    $pager.find('.first').addClass('disabled');
    $pager.find('.prev').addClass('disabled');
  }


  /** Filter Data - Live Search **/
  function filter(selector, query) {
    query = $.trim(query);
    query = query.replace(/ /gi, '|');

    $(selector).each(function () {
      if (($(this).text().search(new RegExp(query, "i")) < 0)) {
        $(this).hide().removeClass('visible');

      } else {
        $(this).show().addClass('visible');
      }
    });
  }

  $('#filter').keyup(function (event) {
    if (event.keyCode == 27 || $(this).val() == '') {
      $(this).val('');
      $('table tbody tr').removeClass('visible').show().addClass('visible');
    } else {
      filter('table tbody tr', $(this).val());
    }
  });

});

CSS

table, td, th {
    border: 1px solid black;
}
.pager {
    margin-top: 15px;
}
.pager span.page-number,
.pager span.first,
.pager span.prev,
.pager span.last,
.pager span.next {
    padding-right: 5px;
    cursor: pointer;
}
.pager span.page-number:hover,
.pager span.first:hover,
.pager span.prev:hover,
.pager span.last:hover,
.pager span.next:hover {
     color: green;   
}
.pager span.page-number.active {
     color: red;   
}

As you will see you can simply use the pagination and the filtering but when you filter the pagination breaks, how can I have the pagination work but display only 5 results at one time and then the order of the rest of the results is in order of the filter?

Thanks, sorry that it may take a while to read through but I appreciate anyone reading through it.

Harshul Pandav · Accepted Answer

You may want to have a look at a JQuery plugin for datatables.

Link: http://holt59.github.io/datatable/

JQuery pagination not working with filtering

Answers (1)

Related Questions