use*_*946 4 html javascript jquery pagination html-table
我正在尝试创建一个表,当有超过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>
Orb*_*ing 16
作为插件的替代方案,如果你想看到简化的代码,这样你就可以自己了解分页的工作原理,看看这个小提琴,我为你敲了一下.
代码只是绑定两个按钮,上一个和下一个按钮,以更改您指定的表的行的可见性.每次单击按钮时,步骤为:查看是否可以向后或向前移动,隐藏当前行,查找应该可见的行,向上或向下10行,然后使它们可见.其余代码用于说明示例.
真正的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;
});
});