title: jQuery pagination next and previous buttons are not working
body: <p>Please help me to do custom dynamic pagination next and previous. Here is my work which is available in this example. I have given in a static page. actually, I am trying it for dynamic page. Please guide me to do the pagination</p>
  
  <pre><code>&lt;table id="myTable"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;S.No&lt;/th&gt;
          &lt;th&gt;Category&lt;/th&gt;
          &lt;th&gt;Product&lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt;
          &lt;th&gt;Status&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Clothing&lt;/td&gt;
          &lt;td&gt;North Jacket&lt;/td&gt;
          &lt;td&gt;$189.99&lt;/td&gt;
          &lt;td&gt;In-stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;Shoes&lt;/td&gt;
          &lt;td&gt;Nike&lt;/td&gt;
          &lt;td&gt;$59.99&lt;/td&gt;
          &lt;td&gt;In-stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;Electronics&lt;/td&gt;
          &lt;td&gt;LED TV&lt;/td&gt;
          &lt;td&gt;$589.99&lt;/td&gt;
          &lt;td&gt;Out of stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;Sporting &lt;/td&gt;
          &lt;td&gt;Ping Golf &lt;/td&gt;
          &lt;td&gt;$159.99&lt;/td&gt;
          &lt;td&gt;In-stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;5&lt;/td&gt;
          &lt;td&gt;Clothing&lt;/td&gt;
          &lt;td&gt;Sweater&lt;/td&gt;
          &lt;td&gt;$19.99&lt;/td&gt;
          &lt;td&gt;In-stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;6&lt;/td&gt;
          &lt;td&gt;Clothing&lt;/td&gt;
          &lt;td&gt;North Jacket&lt;/td&gt;
          &lt;td&gt;$189.99&lt;/td&gt;
          &lt;td&gt;In-stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;Shoes&lt;/td&gt;
          &lt;td&gt;Nike&lt;/td&gt;
          &lt;td&gt;$59.99&lt;/td&gt;
          &lt;td&gt;In-stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;8&lt;/td&gt;
          &lt;td&gt;Electronics&lt;/td&gt;
          &lt;td&gt;LED TV&lt;/td&gt;
          &lt;td&gt;$589.99&lt;/td&gt;
          &lt;td&gt;Out of stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;9&lt;/td&gt;
          &lt;td&gt;Sporting&lt;/td&gt;
          &lt;td&gt;Ping Golf&lt;/td&gt;
          &lt;td&gt;$159.99&lt;/td&gt;
          &lt;td&gt;In-stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;10&lt;/td&gt;
          &lt;td&gt;Shoes&lt;/td&gt;
          &lt;td&gt;Nike&lt;/td&gt;
          &lt;td&gt;$59.99&lt;/td&gt;
          &lt;td&gt;In-stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;11&lt;/td&gt;
          &lt;td&gt;Electronics&lt;/td&gt;
          &lt;td&gt;LED TV&lt;/td&gt;
          &lt;td&gt;$589.99&lt;/td&gt;
          &lt;td&gt;Out of stock&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;Sporting &lt;/td&gt;
          &lt;td&gt;North Jacket &lt;/td&gt;
          &lt;td&gt;$159.99&lt;/td&gt;
          &lt;td&gt;In-stock&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;/tbody&gt;
  </code></pre>
  
  <h2>    </h2>
  
  <pre><code>$('#myTable').after('&lt;nav id="nav" style="display:inline;width:350px;"&gt;&lt;ul class="pagination" style="margin: 2px 0 0;"&gt;&lt;/ul&gt;&lt;/nav&gt;');
  var rowsShown = 5;
  var rowsTotal = $('#myTable tbody tr').length;
  var numPages = Math.round(rowsTotal/rowsShown);
  console.log("mat",Math.round(numPages) );
  $('.pagination').append('&lt;li&gt;&lt;a id="previous" href="#" aria-label="Previous"&gt;&lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');
  for(i = 0;i &lt; numPages;i++) {
      var pageNum = i + 1;
      console.log("te",pageNum);
      $('.pagination').append('&lt;li&gt;&lt;a id="tot1"href="#" rel="'+i+'"&gt;'+pageNum+'&lt;/a&gt;&lt;/li&gt;');
      console.log("i", pageNum, numPages)
      if(i == numPages -1){
          $('.pagination').append('&lt;li&gt;&lt;a href="#" aria-label="Next"&gt;&lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');
      }
  }
  $('#myTable tbody tr').hide();
  $('#myTable tbody tr').slice(0, rowsShown).show();
  //$('#nav a:first').addClass('active');
  $('.pagination a').bind('click', function(){
      $('.pagination a').removeClass('active');
      //$(this).addClass('active');
      var currPage = $(this).attr('rel');
      console.log("curnt",currPage);
      var startItem = currPage * rowsShown;
      var endItem = startItem + rowsShown;
      $('#myTable tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
      css('display','table-row').animate({opacity:1}, 300);
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mathew525/maxveooL/" rel="nofollow">Example on jsfiddle</a></p>
  
  <p>Thanks in advance</p>