jQuery分页不适用于动态表答案

【问题标题】：jquery pagination not working with dynamic tablejQuery分页不适用于动态表
【发布时间】：2015-03-28 04:06:24
【问题描述】：

我有一张如下表：

<table id="user_logs_table" border="2" class="paginated">
                <thead>
                    <tr>
                        <th width="15%">Log Date</th>
                        <th width="15%">Log Time</th>
                        <th width="70%">Description</th> 
                    </tr>
                </thead>

                {{for row in user_log[:19]:}}
                <tbody>
                    <tr>
                        <td width="15%">{{=row['log_date']}}</td>
                        <td width="15%">{{=row['log_time']}}</td>
                        <td width="70%">{{=row['description']}}</td>
                    </tr>
                </tbody>
                {{pass}}
            </table>

表格有过滤器，当应用过滤器时，我调用以下函数：

$.ajax({
    url: "{{=URL('users', 'show_user_log', args=[reqarg])}}",
    data: {date_from: datefrom, date_to: dateto, time_from: timefrom, time_to: timeto},
    success: function(data) {
        result = "<thead><tr> <th width='15%'>Log Date</th> <th width='15%'>Log Time</th> <th width='70%''>Description</th> </tr></thead><tbody>";
        for (var i = 0; i < data.length; i++) {
            result += "<tr>"
            result += "<td>" + data[i]['log_date'] + "</td>";
            result += "<td>" + data[i]['log_time'] + "</td>";
            result += "<td>" + data[i]['description'] + "</td>";
            result += "</tr>"
        }
        result +="</tbody>"
        document.getElementById('user_logs_table').innerHTML = result;
    },
    dataType: 'json'
});

但是这样做的结果是，即使我的分页脚本每页只允许 10 个结果，行也会添加到表中。为什么会这样？

编辑（澄清）：当页面最初加载时，表格显示用户在 2 个页面上完成的最后 20 项活动。总日志包含存储在 json 文件中的每个用户约 1000 个项目。

当我应用过滤器时，url：“{{=URL('users', 'show_user_log', args=[reqarg])}}”函数会检索要显示的正确活动。

如果我在表格的第一页并应用过滤器，并且过滤器返回 100 个结果，则第一页将包含 90 个结果，下一页将包含 10 个结果。如果我在表格的第二页并应用过滤器，则第二页有 90 个结果，第一页有 10 个。

表格中显示的所有行都是正确的，反映了我在过滤器中输入的内容。

【问题讨论】：

你不是很清楚。你是什么意思，“但是这样做的结果是行被添加到表中，即使我的分页脚本每页只允许 10 个结果。”你的意思是说：“但是所有行，即使超过 10 行，都会被添加到表格中，即使我的分页脚本每页只允许 10 个结果。”？
或多或少是的。我添加了说明。

标签： jquery pagination

【解决方案1】：

我遇到了同样的问题。我是这样解决的：

 var table = $('#sample_2').DataTable();
                     for (var i = 1; i < dataInfo.length; i = i + 8) {

                                var dataid = dataInfo[i];
                                var schoolid = dataInfo[i+1];
                                var schoolname = dataInfo[i+2];
                                var address = dataInfo[i+3];
                                var createdat = dataInfo[i+4];
                                var displayname = dataInfo[i+5];
                                var shortname = dataInfo[i + 6];
                                var status = dataInfo[i + 7];
                        // console.log(dataInfo[i]);\
                         var startdeadbolt = "#{deadbolt.externalizedRestriction externalRestrictions:['Edit Data']}";
                         var frst =  startdeadbolt + "<a class='btn btn-mini details' id='" + dataid + "'  href='/datamanagement/dataDetails/"+dataid+"'>Details</a>";
                         var lastdeadbolt = "#{/deadbolt.externalizedRestriction}";
                         var last = lastdeadbolt + "<a class='btn btn-mini btn-danger delete_data' id='" + dataid + "'><i class='icon-remove icon-white'></i> Delete</a>";
                         table.row.add([
                             dataid,
                             schoolid,
                             schoolname,
                             address,
                             createdat,
                             displayname,
                             shortname,
                             status,
                             frst,
                             last
                         ]).draw();

【讨论】：