Table pagination with jQuery
<p>I'm trying to simulate a pagination using jQuery
and have worked out all the essential pagination elements but can't get the navigation part to work. It worked with a list element but not with this table structure. Can someone please tell me what could be the issue?</p>

<pre><code>var show_per_page = 2;
var number_of_items = $('tbody').children().size();
var number_of_pages = Math.ceil(number_of_items / show_per_page);
var current_link = 0;

$('table').after('&lt;div class=controls&gt;&lt;/div&gt;');
var navigation_html = '&lt;a class="prev" onclick="previous()"&gt;...&lt;/a&gt;';

while (number_of_pages &gt; current_link) {
  navigation_html += '&lt;a class="page" onclick="go_to_page(' + current_link + ')" longdesc="' + current_link + '"&gt;' + (current_link + 1) + '&lt;/a&gt;';
  current_link++;
}
navigation_html += '&lt;a class="next" onclick="next()"&gt;...&lt;/a&gt;';

$('.controls').html(navigation_html);
$('.controls .page:first').addClass('active');

$('tbody').children().hide();
$('tbody').children().slice(0, show_per_page).show();

function go_to_page(page_num) {
  start_from = page_num * show_per_page;
  end_on = start_from + show_per_page;

  $('tbody').children().hide().slice(start_from, end_on).show();

  $('.page[longdesc=' + page_num + ']').addClass('active').siblings('.active').removeClass('active');

}

function previous() {
  new_page = current_link - 1;

  if ($('.active').prev('.page').length == true) {
    go_to_page(new_page);
  }
}

function next() {
  new_page = current_link + 1;

  if ($('.active').next('.page').length == true) {
    go_to_page(new_page);
  }
  $("a.prev").show();

}
</code></pre>

<p>Demo <a href="https://jsfiddle.net/sungsoonz/hvd6eb5e/4/" rel="nofollow">JS Fiddle</a></p>