我正在尝试创建一个表，当行数超过 10 行时，我想创建一个超链接，告诉用户转到下一页。这个概念称为分页，但我如何使用 jQuery 实现它？/JavaScript ？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Table</title>
<style type="text/css">
th {
background-color: #ddd;
}
th td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<th>Heading1</th>
<th>Heading2</th>
<tbody>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr></tr>
</tbody>
</table>
</body>
</html>
最佳答案
除了插件之外，如果您想查看简化的代码以便了解分页的工作原理，请查看我为您准备的这个 fiddle 。
该代码简单地绑定(bind)了两个按钮，previous 和 next 以更改您指定的表格行的可见性。每次单击按钮时，步骤是:查看是否可以向后或向前移动，隐藏当前行，找到应该可见的行，向上 10 个或向下 10 个，然后使它们可见。其余代码用于说明示例。
真正的 jQuery 工作是由 less-than 完成的和 greater-than选择器::lt() 和 :gt()，用于选择要隐藏/显示的行。
var maxRows = 10;
$('.paginated-table').each(function() {
var cTable = $(this);
var cRows = cTable.find('tr:gt(0)');
var cRowCount = cRows.size();
if (cRowCount < maxRows) {
return;
}
/* add numbers to the rows for visuals on the demo */
cRows.each(function(i) {
$(this).find('td:first').text(function(j, val) {
return (i + 1) + " - " + val;
});
});
/* hide all rows above the max initially */
cRows.filter(':gt(' + (maxRows - 1) + ')').hide();
var cPrev = cTable.siblings('.prev');
var cNext = cTable.siblings('.next');
/* start with previous disabled */
cPrev.addClass('disabled');
cPrev.click(function() {
var cFirstVisible = cRows.index(cRows.filter(':visible'));
if (cPrev.hasClass('disabled')) {
return false;
}
cRows.hide();
if (cFirstVisible - maxRows - 1 > 0) {
cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show();
} else {
cRows.filter(':lt(' + cFirstVisible + ')').show();
}
if (cFirstVisible - maxRows <= 0) {
cPrev.addClass('disabled');
}
cNext.removeClass('disabled');
return false;
});
cNext.click(function() {
var cFirstVisible = cRows.index(cRows.filter(':visible'));
if (cNext.hasClass('disabled')) {
return false;
}
cRows.hide();
cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show();
if (cFirstVisible + 2 * maxRows >= cRows.size()) {
cNext.addClass('disabled');
}
cPrev.removeClass('disabled');
return false;
});
});
关于javascript - 带有 jQuery 分页的 HTML 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4294701/