Question

我有一个表，我想分页。我使用以下代码加载数据：

//load data in table
$.ajax({
    type: "POST",
    url: "../master.asmx/selectmaster",
    contentType: "application/json; charset=utf-8",
    data: "{}",
    dataType: "json",
    success: function showgrid(msg) {
        var j = jQuery.parseJSON(msg.d);
        var newcontent = '';
        var newcontent = "<table class=\"paginated-table\"><thead><tr><th class=\"header\">نام</th><th class=\"header\">نام خانوادگی</th></tr></thead><tbody>";
        for (var i = 0; i < j.length; i++) {
            newcontent += "<tr><td>" + j[i].name + "</td><td>" + j[i].family + "</td><tr>";
        }

        newcontent += "</tbody></table><br /><span class=\"prev\">PREV</span><div id=\"index\"><span>1</span></div><span class=\"next\">NEXT</span>";
        $("#grid").append(newcontent);
    },
    error: faild
});
//error message
function faild(msg) {
    alert("Error!");
}

我的Ajax函数位于js文件中，而我的分页代码位于另一个js文件中。

    var maxRows = 3;
$('.paginated-table').each(function (i) {
    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');
    alert("OK");
    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;
    });
});

我使用此示例表尝试了此代码：

<table class="paginated-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><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><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><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><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><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><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><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>

            </tbody>
        </table>
        <span class="prev">Previous</span><span class="next">Next</span>

它适用于这个jsFiddle - http://jsfiddle.net/29W9Q/ - 但我无法在我的页面中使用它。

Answer 1

而不是 $('.paginated-table').each(function () {

尝试使用 $.each($('.paginated-table'),function(){

用hQuery表格html分页;每个（）不起作用？

1 个答案: