DataTables.js分页和搜索不起作用 [英] DataTables.js pagination and search not working

问题描述

我正在通过ajax将所有行加载到DataTables中.这些行已成功加载，但没有分页(但是，更改显示25个条目"下拉菜单时，分页按钮已成功计数).此外，搜索无法正常工作.

I'm loading all my rows into DataTables via ajax. The rows are successfully loading, but nothing is paginated (however the pagination buttons are being successfully counted when the "Show 25 entries" dropdown is changed). Additionally, search is not working.

任何错误都不会输出到控制台.这是一些示例数据，我的DataTables JS调用以及实际表的标记.

No errors are being output to the console whatsoever. Here is some sample data, my DataTables JS call, and markup for the actual table.

样本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>

推荐答案

我建议您看看DataTables FAQ 和服务器端使用情况文档，因为您的分页问题似乎已得到解决那里(至少部分).此错误的最常见原因是您的 recordsFiltered 值未被服务器端代码正确计算.请记住，此值应等于过滤器选择的行数，而不是数组的总大小或单个页面上的行数.在没有看到您的服务器端代码来计算此数字的情况下，我不能肯定地说这是您的问题，但我会先去看看.

I'd recommend you take a look at the DataTables FAQ, and Server-Side Usage documentation, as your pagination issue seems to be addressed there (at least partially). The most common source of this error is your recordsFiltered value not being calculated correctly by your server-side code. Remember that this value should be equal to the number of rows that are chosen by the filter, not the total size of the array or the number of rows on a single page. Without seeing your server-side code for the calculation of this number I can't say for certain that that is your issue, but I'd look there first.

这篇关于DataTables.js分页和搜索不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！