Javascript 带有 jQuery 分页的 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4294701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML tables with jQuery pagination
提问by user443946
I am trying to create a table such that when there are more than 10 rows I want to create a hyperlink which tells the user to go on the next page. The concept is called pagination, but how can I achieve it with jQuery/ JavaScript?
我正在尝试创建一个表，以便当超过 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>
回答by Orbling
Alternatively to the plugin, if you want to see simplified code so you can educate yourself as to how pagination works, have a look at this fiddle I knocked up for you.
除了插件之外，如果您想查看简化的代码以便了解分页的工作原理，请查看我为您准备的这个小提琴。
The code simply binds two buttons, previous and next to change the visibility of the rows of the table that you specified. Each time a button is clicked, the steps are: see if you can move backward or forward, hide the current rows, find the rows that should be visible, 10 up or 10 down, and then make them visible. The rest of the code is to illustrate the example.
该代码仅绑定两个按钮，上一个和下一个以更改您指定的表行的可见性。每次点击一个按钮，步骤是：看能不能前后移动，隐藏当前行，找到应该可见的行，向上10或向下10，然后使它们可见。其余代码用于说明示例。
The real jQuery work is being done by the less-thanand greater-thanselectors: :lt()and :gt(), to select the rows for hiding/showing.
真正的 jQuery 工作是由小于和大于选择器完成的：: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;
});
});
