表html分页与jQuery;Each()不起作用

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(){