DataTables.js pagination and search not working

问题

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.

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

Sample JSON Data

{
    "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"
        }
    ]
}

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

Markup

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

回答1:

Whenever you update the table rows after the page is loaded, you have to update datatable using fnDraw(). See: http://www.meadow.se/wordpress/refreshing-data-in-jquery-datatables/

回答2:

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.

来源：https://stackoverflow.com/questions/37998062/datatables-js-pagination-and-search-not-working

标签

javascript

jquery

ajax

twitter-bootstrap

datatables