Question

我正在通过ajax将所有行加载到DataTables中。行已成功加载，但没有任何分页（但是当“显示25个条目”下拉列表更改时，分页按钮正在成功计数）。此外，搜索无效。

没有任何错误输出到控制台。这是一些示例数据，我的DataTables JS调用和实际表的标记。

示例JSON数据

{
    "draw": 0,
    "recordsFiltered": 100,
    "recordsTotal": 100,
    "data": [
        {
            "version": "1.0",
            "user_agent": "Mozilla\/5.0 (Linux; Android 5.1.1; SM-J500FN Build\/LMY48B) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/51.0.2704.81 Mobile Safari\/537.36",
            "slug": "_aT8Ubjhtc9asg",
            "provider": "Apple",
            "location": "London",
            "is_correct": true,
            "ip_address": "1.1.1.1",
            "inserted_at": "2016-06-22T10:36:22Z",
            "id": 1023,
            "final_upload": 2.09260717097,
            "final_download": 2.27839495417,
            "all_upload": "ekjheiasdj",
            "all_download": "ashdashjkd"
        },
        {
            "version": "1.0",
            "user_agent": "Mozilla\/5.0 (Linux; Android 5.1.1; SM-J500FN Build\/LMY48B) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/51.0.2704.81 Mobile Safari\/537.36",
            "slug": "_aBsUejhtcu9sa",
            "provider": "Apple",
            "location": "London",
            "is_correct": true,
            "ip_address": "1.1.1.1",
            "inserted_at": "2016-06-23T10:36:22Z",
            "id": 1023,
            "final_upload": 3.09260717097,
            "final_download": 4.27839495417,
            "all_upload": "ekjheiasdj",
            "all_download": "ashdashjkd"
        }
    ]
}

JS

<script>
    $(document).ready(function() {

        $('#datatable').dataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": "http://localhost:8888/api/rows.php",
            "aoColumns": [
                {"mData": "id"},
                {"mData": "provider"},
                {"mData": "location"},
                {"mData": "is_correct"},
                {"mData": "ip_address"},
                {"mData": "inserted_at"},
                {"mData": "final_upload"},
                {"mData": "final_download"},
                {"mData": "slug"}
            ]
        });

    });
</script>

标记

<table id="datatable" class="table table-striped table-bordered">
    <thead>
        <tr>
            <td>ID</td>
            <td>Provider</td>
            <td>Location</td>
            <td>Accuracy</td>
            <td>IP Address</td>
            <td>Timestamp</td>
            <td>Up</td>
            <td>Down</td>
            <td>Slug</td>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

Answer 1

每次在加载页面后更新表行时，都必须使用fnDraw()更新数据表。请参阅：http://www.meadow.se/wordpress/refreshing-data-in-jquery-datatables/

Answer 2

我建议您查看DataTables FAQ和Server-Side Usage文档，因为您的分页问题似乎已在那里解决（至少部分）。此错误的最常见原因是您的recordsFiltered值未被服务器端代码正确计算。请记住，此值应等于筛选器选择的行数，而不是数组的总大小或单个页面上的行数。如果没有看到用于计算此数字的服务器端代码，我无法确定这是您的问题，但我会首先查看。

DataTables.js分页和搜索无法正常工作

2 个答案: