title: JQuery pagination not working with filtering
body: <p>I am writing to seek help as i'm encountering some troubles with my university coursework.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Here i provide a link to my JS fiddle: <a href="http://jsfiddle.net/u7unm9zy/1/" rel="nofollow">http://jsfiddle.net/u7unm9zy/1/</a>
  (best way to check filtering is by typing 1 into the search box)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form action="" class="live-search" method="post"&gt;
      &lt;input type="text" value="" name="filter" id="filter" placeholder="Search" /&gt;
  &lt;/form&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;th&gt;Column 1&lt;/th&gt;
          &lt;th&gt;Column 2&lt;/th&gt;
          &lt;th&gt;Column 3&lt;/th&gt;
          &lt;th&gt;Column 4&lt;/th&gt;
          &lt;th&gt;Column 5&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 1&lt;/td&gt;
              &lt;td&gt;Row 1&lt;/td&gt;
              &lt;td&gt;Row 1&lt;/td&gt;
              &lt;td&gt;Row 1&lt;/td&gt;
              &lt;td&gt;Row 1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 2&lt;/td&gt;
              &lt;td&gt;Row 2&lt;/td&gt;
              &lt;td&gt;Row 2&lt;/td&gt;
              &lt;td&gt;Row 2&lt;/td&gt;
              &lt;td&gt;Row 2&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 3&lt;/td&gt;
              &lt;td&gt;Row 3&lt;/td&gt;
              &lt;td&gt;Row 3&lt;/td&gt;
              &lt;td&gt;Row 3&lt;/td&gt;
              &lt;td&gt;Row 3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 4&lt;/td&gt;
              &lt;td&gt;Row 4&lt;/td&gt;
              &lt;td&gt;Row 4&lt;/td&gt;
              &lt;td&gt;Row 4&lt;/td&gt;
              &lt;td&gt;Row 4&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 5&lt;/td&gt;
              &lt;td&gt;Row 5&lt;/td&gt;
              &lt;td&gt;Row 5&lt;/td&gt;
              &lt;td&gt;Row 5&lt;/td&gt;
              &lt;td&gt;Row 5&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 6&lt;/td&gt;
              &lt;td&gt;Row 6&lt;/td&gt;
              &lt;td&gt;Row 6&lt;/td&gt;
              &lt;td&gt;Row 6&lt;/td&gt;
              &lt;td&gt;Row 6&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 7&lt;/td&gt;
              &lt;td&gt;Row 7&lt;/td&gt;
              &lt;td&gt;Row 7&lt;/td&gt;
              &lt;td&gt;Row 7&lt;/td&gt;
              &lt;td&gt;Row 7&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 8&lt;/td&gt;
              &lt;td&gt;Row 8&lt;/td&gt;
              &lt;td&gt;Row 8&lt;/td&gt;
              &lt;td&gt;Row 8&lt;/td&gt;
              &lt;td&gt;Row 8&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 9&lt;/td&gt;
              &lt;td&gt;Row 9&lt;/td&gt;
              &lt;td&gt;Row 9&lt;/td&gt;
              &lt;td&gt;Row 9&lt;/td&gt;
              &lt;td&gt;Row 9&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 10&lt;/td&gt;
              &lt;td&gt;Row 10&lt;/td&gt;
              &lt;td&gt;Row 10&lt;/td&gt;
              &lt;td&gt;Row 10&lt;/td&gt;
              &lt;td&gt;Row 10&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 11&lt;/td&gt;
              &lt;td&gt;Row 11&lt;/td&gt;
              &lt;td&gt;Row 11&lt;/td&gt;
              &lt;td&gt;Row 11&lt;/td&gt;
              &lt;td&gt;Row 11&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 12&lt;/td&gt;
              &lt;td&gt;Row 12&lt;/td&gt;
              &lt;td&gt;Row 12&lt;/td&gt;
              &lt;td&gt;Row 12&lt;/td&gt;
              &lt;td&gt;Row 12&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$('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 = $('&lt;div class="pager"&gt;&lt;/div&gt;');
    $('&lt;span class="first"&gt;&amp;lt;&lt;/span&gt;').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);
    $('&lt;span class="prev"&gt;&amp;lt;&amp;lt;&lt;/span&gt;').bind('click', function (event) {
      if ((currentPage - 1) &gt;= 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 &lt; numPages; page++) {
      $('&lt;span class="page-number"&gt;&lt;/span&gt;').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');
    $('&lt;span class="next"&gt;&amp;gt;&lt;/span&gt;').bind('click', function (event) {
      if ((currentPage + 1) &lt;= 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);
    $('&lt;span class="last"&gt;&amp;gt;&amp;gt;&lt;/span&gt;').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")) &lt; 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());
      }
    });
  
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>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;   
  }
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks, sorry that it may take a while to read through but I appreciate anyone reading through it.</p>