用jQuery进行表分页
[英]Table pagination with 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小提琴
3 个解决方案
解决方案1
1 2016-02-03 00:34:45
好吧，我可以看到的当前问题与功能范围有关。 与其解决问题，不如告诉您要添加到链接中的go_to_page函数超出范围。
编辑：看起来这是一个jsfiddle问题。
解决方案2
1 2016-02-03 00:43:02
您的代码有效，它与JSfiddle封装函数名称有关
我在本地文件上运行了您的代码，只需要包含jquery。
这是我使用的整个代码： https : //gist.github.com/kEpEx/4422d441dbd0b71dfd3d
解决方案3
0 2016-02-03 01:44:57
我No Wrap - in <body> JS Fiddle Javascript设置更改为No Wrap - in <body>并包装了显式的load函数，现在可以使用了。
jquery和html中的表分页
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.