Ajax 数据表插件分页答案

【问题标题】：Ajax datatable plugin paginateAjax 数据表插件分页
【发布时间】：2017-03-16 01:54:12
【问题描述】：

我有这个代码，数据表插件

$('#tbl_loket').createTable( {
    "ajax": "<?=site_url('penilaian/report/get_data')?>",
    "columns": [
        { "data": "date_in" },
        { "data": "nama" },
        { "data": "keterangan" },
        { "data": "sangat_puas" },
        { "data": "puas" },
        { "data": "tidak_puas" },
        { "data": "total" },
        { "data": "nilai" },
    ],
    "bPaginate": true,
    "bLengthChange": true,
    "bFilter": false,
    "bInfo": true,
    "bAutoWidth": false,
    "pagingType": "full_numbers",
    "paging": true,
} );

这是我的表格截图

问题：如何更改每页的项目数？

【问题讨论】：

问题不清楚，请问如何更改每页的条目数？
是的，这就是我的意思@DaveL
我每页设置了 10 个项目，但仍然显示所有数据 15 行
检查this
但我的表格仍然显示 15 个项目，而不是 10 个项目。 cek 这是我的桌子截图 i.stack.imgur.com/YRrAF.png –

标签： javascript php ajax datatable

【解决方案1】：

您使用的是旧版本，因此您需要使用：

$('#tbl_loket').createTable( {
   "ajax": "<?=site_url('penilaian/report/get_data')?>",
    "columns": [
        { "data": "date_in" },
        { "data": "nama" },
        { "data": "keterangan" },
        { "data": "sangat_puas" },
        { "data": "puas" },
        { "data": "tidak_puas" },
        { "data": "total" },
        { "data": "nilai" },
    ],
    "bPaginate": true,
    "bLengthChange": true,
    // Set to 10 results
    "pageLength" : 10,
    // Optional, it'll include '10' in the dropdown menu
    "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
    "bFilter": false,
    "bInfo": true,
    "bAutoWidth": false,
    "pagingType": "full_numbers",
    "paging": true,
});

在对表格进行更改后不要忘记使用“draw()”方法 - 如果不这样做，它不会立即反映更改。

【讨论】：

【解决方案2】：

你应该在你的代码中设置iDisplayLength，

"iDisplayLength": 10

这是Source。

所以，你的来源应该是这样的

$('#tbl_loket').createTable( {
    "ajax": "<?=site_url('penilaian/report/get_data')?>",
    "columns": [
        { "data": "date_in" },
        { "data": "nama" },
        { "data": "keterangan" },
        { "data": "sangat_puas" },
        { "data": "puas" },
        { "data": "tidak_puas" },
        { "data": "total" },
        { "data": "nilai" },
    ],
    "bPaginate": true,
    "bLengthChange": true,
    "bFilter": false,
    "bInfo": true,
    "bAutoWidth": false,
    "pagingType": "full_numbers",
    "paging": true,
    "iDisplayLength": 10
} );

【讨论】：

但我的表格仍然显示 15 个项目，而不是 10 个项目。 cek 这是我的桌子截图i.stack.imgur.com/YRrAF.png
如果你的库老了，你也可以试试"pageLength": 50

【解决方案3】：

适用于 DataTables 版本 1.10.5 及更高版本

<table data-page-length='25'>
</table>

适用于 DataTables 1.10 及更高版本

"pageLength": 50

对于早于 1.10 版的数据表

"iDisplayLength": 50

如果所有这些都不起作用，您能否提供 ajax 返回？您的 ajax 返回是否包含 recordsFiltered 和 recordsTotal？它可能返回错误的值。例如，显示 15 条记录中的 1-10 条，但第 1 页有 15 条记录，我假设第 2 页根本没有记录？

【讨论】：

【解决方案4】：

如果您只想分页...只需输入此代码。

$("#table_id").DataTable({
    "paging":true,
    "dom": 'lBfrtip',
    "scrollX": true,    
});

如果您从 ajax 获取数据。使用此代码... 根据您的需要进行更改

$.ajax({
    type: 'POST',
    url         : YOUR_URL,
    data        : {'ids':ids,'start':start, 'end':end},
    timeout     : 30000,
    success     : function (e) {
        $("#table_id").DataTable({
            "paging":true,
            "dom": 'lBfrtip',
            "scrollX": true,    
        });                 
    }       
});

还有一个用途

<?php ?> instead of <?= ?>

【讨论】：