jQuery的表分頁

我試圖使用jQuery 來模擬分頁，並且已經計算出所有必需的分頁元素，但無法使導航部分正常工作。它與列表元素一起工作，但不與此表結構一起工作。有人可以告訴我可能是什麼問題？jQuery的表分頁

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('<div class=controls></div>'); 
var navigation_html = '<a class="prev" onclick="previous()">...</a>'; 

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

$('.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(); 

}

演示JS Fiddle

來源

2016-02-03 Seong Lee