带有 jQuery 分页的 HTML 表格答案

【问题标题】：HTML tables with jQuery pagination带有 jQuery 分页的 HTML 表格
【发布时间】：2011-05-16 17:36:23
【问题描述】：

我正在尝试创建一个表格，当有超过 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>

【问题讨论】：

您使用的是服务器端语言吗？

标签： javascript jquery html pagination html-table

【解决方案1】：

除了插件之外，如果您想查看简化的代码以便了解分页的工作原理，请查看我为您敲定的这个小提琴。

http://jsfiddle.net/29W9Q/

代码只是绑定了两个按钮，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;
    });

});

【讨论】：

+1 非常有帮助。除非绝对必要，否则我讨厌使用插件，因为我喜欢完全可以自定义代码，而不必使用他们制作的代码。
@chromedude 同意，尽管重新发明轮子是“不好的”——它有助于准确地了解发生了什么，以防你需要巧妙地改变它。客户并不热衷于来自他们的开发人员的“它不这样做”的答案。 jQuery（以及可拖动/可拖放的 UI 类）是我使用的唯一 JS 库。
喜欢 (>) 有没有人可以做到这一点？ :) 谢谢。
@user2789695：虽然直接相关，但这是对现有内容的一个很大的扩展，因为在这个例子中使用它并不是最容易的事情。几乎可以肯定，网站上还有其他答案可以证明这一点。