数据表延迟1000行中的10行

Question

我有API返回1000个帐户。 我的目标是只加载我的前10行，并加载更多 - 如果用户点击next。

HTML

表格

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Account ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
</table>

JS

尝试＃1

配置

$('#example').DataTable( {
        "bPaginate": true,
        "processing": true,
        "serverSide": true,
        ajax: {
            url: 'http://localhost:8888/api/account_index',
            dataSrc: 'data'
        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],
        "deferRender": true,
        "deferLoading": 10 <-----
    } );

我得到了

尝试＃2

配置

$('#example').DataTable( {
        "bPaginate": true,
        "processing": true,
        "serverSide": true,
        ajax: {
            url: 'http://localhost:8888/api/account_index',
            dataSrc: 'data',
            deferLoading: 10 <-----

        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],
        "deferRender": true

    } );

我列出了所有1000个帐户

现在有点卡住，对此的任何见解将不胜感激！

Answer 1

如果您想一次只显示10条记录，则必须设置长度。 添加以下mwntioned属性。

＆＃34; iDisplayLength＆＃34; ：10

Answer 2

我将数据复制到myjson.com并使用了数据表1.10.12。它似乎工作。下面的代码段。

$('#example').DataTable( {
        ajax: {
            url: 'https://api.myjson.com/bins/13ahl',
            //dataSrc: 'data'
        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],
    } );

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Account ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
</table>