Javascript 使用jQuery分页的HTML表

我试图创建一个表，这样当有超过10行时，我想创建一个超链接，告诉用户进入下一页。这个概念称为分页，但如何使用/

桌子
th{
背景色：#ddd；
}
th td{
边框：1px纯黑；
}
标题1
标题2
这是TDT这是td
这是TDT这是td
这是TDT这是td
这是TDT这是td
这是TDT这是td
这是TDT这是td
这是TDT这是td
这是TDT这是td
这是TDT这是td

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

代码仅绑定两个按钮，即“上一个”和“下一个”，以更改指定表行的可见性。每次单击按钮时，步骤是：查看是否可以向后或向前移动、隐藏当前行、查找应该可见的行、向上移动10行或向下移动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;
    });

});

var maxRows=10；
$（'.paginated table'）。每个（函数（）{
var cTable=$（此项）；
var cRows=cTable.find（'tr:gt（0）'）；
var cRowCount=cRows.size（）；
if（cRowCount0）{
cRows.filter（':lt（'+cFirstVisible++'）：gt（'+（cFirstVisible-maxRows-1）+'））.show（）；
}否则{
cRows.filter（':lt（'+cFirstVisible+'））.show（）；
}
if（cFirstVisible-maxRows=cRows.size（））{
cNext.addClass（“已禁用”）；
}
cPrev.removeClass（“禁用”）；
返回false；
});
});

您使用的是服务器端语言吗？+1非常有用。除非绝对必要，否则我讨厌使用插件，因为我喜欢完全自定义代码，而不必使用他们编写的代码。@chromedude同意，尽管重新发明轮子是“坏的”-它有助于准确地知道正在发生什么，以防需要微妙地更改它。客户并不热衷于从他们的开发者那里得到“它不会那样做”的答案。jQuery（以及可拖动/可拖放的UI类）是我唯一使用的JS库。使用like（>）怎么样有人可以这样做吗？：）谢谢。@user2789695:虽然直接相关，但这是对现有内容的一个大扩展，因为要抓住这个例子并不是最容易的。几乎可以肯定的是，网站上还有其他答案证明了这一点。

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;
    });

});