title: Pagination not working properly in jquery
body: <p>When I put search item, first pagination is shows the rows for searched item but after that the pagination does not populating the searched rows, instead it shows default rows. So what i want is when i click pagination 2, the table should show the searched item rows not the default rows. Basically, I am trying to develop datatable sort of thing, where i can incorporate pagination, search option,etc</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var rowsShown = 5;
    var rowsTotal = $('#data tr').length;
    var numPages = rowsTotal / rowsShown;
    $("#error").hide();
    $("#total").html(rowsTotal);
    $("#nav").show();
  
    $('#data tr').hide();
    $('#data tr').slice(0, rowsShown).show();
  
    for (i = 0; i &lt; numPages; i++) {
      var pageNum = i + 1;
      $('#nav').append('&lt;a href="#" rel="' + i + '" class="pagination"&gt;' + pageNum + '&lt;/a&gt; ');
    }
  
    $('#nav a:first').addClass('active').css({
      'color': '#1D6185',
      'font-weight': 'bold',
      'background-color': '#86CCF1'
    });
  
    $('#nav a').click(function() {
      $('#nav a').removeClass('active').removeAttr('style');
      $(this).addClass('active').css({
        'color': '#1D6185',
        'font-weight': 'bold',
        'background-color': '#86CCF1'
      });
      var currPage = $(this).attr('rel');
      var startItem = currPage * rowsShown;
      var endItem = startItem + rowsShown;
  
      $('#data tr').hide().slice(startItem, endItem).css('display', 'table-row').animate({
        opacity: 1
      }, 300);
  
    });
    //-------------search---------  
  
    $('#search').keyup(function() {
      $('#data tr').hide();
      $("#total").hide();
      $('#nav').empty();
      var value = $('#search').val().toLowerCase();
      var resultCount = 0;
  
      $('#data tr').each(function() {
        if ($(this).text().toLowerCase().indexOf(value) != -1) {
          resultCount++;
        }
      });
  
      $("#total").html(resultCount).show();
      var Search_rowsShown = 5;
      var Search_numPages = resultCount / Search_rowsShown;
  
  
  
      var search_value = $(this).val().toLowerCase();
      $("#data tr").filter(function() {
          return $(this).text().toLowerCase().indexOf(search_value) &gt; -1
  
        })
        .slice(0, 5)
        .show();
  
      for (j = 0; j &lt; Search_numPages; j++) {
        var Search_pageNum = j + 1;
        $('#nav').append('&lt;a href="#" rel="' + j + '"&gt;' + Search_pageNum + '&lt;/a&gt; ');
      }
  
      $('#nav a:first').addClass('active').css({
        'color': 'red',
        'font-weight': 'bold'
      });
  
      $('#nav a').click(function() {
        $('#nav a').removeClass('active').removeAttr('style');
        $(this).addClass('active').css({
          'color': 'red',
          'font-weight': 'bold'
        });
        var search_currPage = $(this).attr('rel');
        var search_startItem = search_currPage * Search_rowsShown;
        var search_endItem = search_startItem + Search_rowsShown;
  
        $('#data tr').hide().slice(search_startItem, search_endItem).css('display', 'table-row').animate({
          opacity: 1
        }, 300);
      });
  
  
      if (resultCount == 0) {
        $("#error").html("No Data").show();
        $("#total").hide();
        $("#nav").hide();
        $("#totentry").hide();
      } else {
        $("#error").hide();
        $("#total").show();
        $("#nav").show();
        $("#totentry").show();
      }
  
    });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table border="1" class="tab" id="tab"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th colspan="2"&gt;Report/Table Name&lt;/th&gt;
        &lt;th colspan="3"&gt;&lt;span class="srch"&gt;Search :&lt;/span&gt;&lt;input type="text" id="search" class="searchTerm" placeholder="Please enter the text here..." /&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;SL.No&lt;/th&gt;
        &lt;th&gt;Column2&lt;/th&gt;
        &lt;th&gt;Column3&lt;/th&gt;
        &lt;th&gt;Column4&lt;/th&gt;
        &lt;th&gt;Column5&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody id="data"&gt;
      &lt;tr&gt;
        &lt;td&gt;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;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;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;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;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;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;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;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;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;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;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;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;tr&gt;
        &lt;td&gt;13&lt;/td&gt;
        &lt;td&gt;Row 13&lt;/td&gt;
        &lt;td&gt;Row 13&lt;/td&gt;
        &lt;td&gt;Row 13&lt;/td&gt;
        &lt;td&gt;Row 13&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;14&lt;/td&gt;
        &lt;td&gt;Row 14&lt;/td&gt;
        &lt;td&gt;Row 14&lt;/td&gt;
        &lt;td&gt;Row 14&lt;/td&gt;
        &lt;td&gt;Row 14&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;15&lt;/td&gt;
        &lt;td&gt;Row 15&lt;/td&gt;
        &lt;td&gt;Row 15&lt;/td&gt;
        &lt;td&gt;Row 15&lt;/td&gt;
        &lt;td&gt;Row 15&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;16&lt;/td&gt;
        &lt;td&gt;Row 16&lt;/td&gt;
        &lt;td&gt;Row 16&lt;/td&gt;
        &lt;td&gt;Row 16&lt;/td&gt;
        &lt;td&gt;Row 16&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;17&lt;/td&gt;
        &lt;td&gt;Row 17&lt;/td&gt;
        &lt;td&gt;Row 17&lt;/td&gt;
        &lt;td&gt;Row 17&lt;/td&gt;
        &lt;td&gt;Row 17&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;18&lt;/td&gt;
        &lt;td&gt;Row 18&lt;/td&gt;
        &lt;td&gt;Row 18&lt;/td&gt;
        &lt;td&gt;Row 18&lt;/td&gt;
        &lt;td&gt;Row 18&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;19&lt;/td&gt;
        &lt;td&gt;Row 19&lt;/td&gt;
        &lt;td&gt;Row 19&lt;/td&gt;
        &lt;td&gt;Row 19&lt;/td&gt;
        &lt;td&gt;Row 19&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;20&lt;/td&gt;
        &lt;td&gt;Row 20&lt;/td&gt;
        &lt;td&gt;Row 20&lt;/td&gt;
        &lt;td&gt;Row 20&lt;/td&gt;
        &lt;td&gt;Row 20&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;21&lt;/td&gt;
        &lt;td&gt;Row 21&lt;/td&gt;
        &lt;td&gt;Row 21&lt;/td&gt;
        &lt;td&gt;Row 21&lt;/td&gt;
        &lt;td&gt;Row 21&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;22&lt;/td&gt;
        &lt;td&gt;Row 22&lt;/td&gt;
        &lt;td&gt;Row 22&lt;/td&gt;
        &lt;td&gt;Row 22&lt;/td&gt;
        &lt;td&gt;Row 22&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;23&lt;/td&gt;
        &lt;td&gt;Row 23&lt;/td&gt;
        &lt;td&gt;Row 23&lt;/td&gt;
        &lt;td&gt;Row 23&lt;/td&gt;
        &lt;td&gt;Row 23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;24&lt;/td&gt;
        &lt;td&gt;Row 24&lt;/td&gt;
        &lt;td&gt;Row 24&lt;/td&gt;
        &lt;td&gt;Row 24&lt;/td&gt;
        &lt;td&gt;Row 24&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tfoot id="footer"&gt;
      &lt;tr&gt;
        &lt;td colspan="2"&gt;&lt;span id="totentry"&gt;Total Entry :&lt;/span&gt;&lt;span id="total"&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td align="center"&gt;&lt;span id="error"&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td colspan="2"&gt;
          &lt;div id="nav" class="nav"&gt;&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tfoot&gt;
  &lt;/table&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>