数据表 \- 如何在页面加载时只加载一定数量的行？

Question

我有一个 小提琴，它可以为 URL 制作一个 ajax 并呈现一个表，但我想在页面加载期间延迟并只加载 10 行。

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

 $(document).ready(function() {

$('#example').DataTable( {
        "bPaginate": true,
        "processing": true,
        "bServerSide": true,

        ajax: {
            url: 'https://api.myjson.com/bins/1egsx',
            dataSrc: 'data'
        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],
        "deferRender": true,
        "deferLoading": 10,

    } );

});

---

我不断得到

未找到匹配的记录

原文由 code-8 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

TL;DR： 您可能应该使用 deferRender 进行客户端处理 ，或者 使用服务器端处理而不使用 deferRender （通过修复您的 JSON 数据）。此答案假定您需要服务器端处理。

延迟加载

正确使用服务器端处理时，默认行为是每个 ajax 请求仅发送一页上的行数。您不需要使用 deferLoading - 这是它的作用（来自 此处的文档）：

使用服务器端处理时，DataTables 的默认操作模式是简单地丢弃表中当前存在的任何数据，并向服务器发出请求以获取要显示的第一页数据。这对于一个空表来说很好，但是如果您已经在纯 HTML 中显示了第一页数据，那就是资源浪费。因此，此选项的存在允许您指示 DataTables 不发出初始请求，而是使用页面上已有的数据（不会对其应用排序等）。

由于您的所有数据都来自 ajax，因此不应选择该选项。

延迟渲染

如果您正确使用服务器端处理，您真的不需要使用 deferRender 。 deferRender 将（来自 此处的文档）：

作为帮助说明这一点的示例，如果您加载一个包含 10,000 行的数据集，但分页显示长度仅为 10 条记录，而不是创建所有 10,000 行，当启用延迟呈现时，DataTables 将仅创建 10。

请注意这里的重要短语：

如果加载包含 10,000 行的数据集

如果您正确使用服务器端处理，则应该只在单次加载中加载每页的行数。 deferRender 确实是使用客户端处理时加速数据表的一个选项。服务器端处理已经处理了 deferRender 所做的事情。请参阅数据表 常见问题解答 中的这张图片，了解如何加速数据表：

请注意，它强调 deferRender 仅适用于客户端。这里要注意的是，如果你没有很多行（数万以上），你可能不需要使用服务器端处理。

正确使用服务端处理：

您的问题可能是因为您的 API 没有为服务器端处理返回正确形式的 JSON；您需要发送的信息不仅仅是要显示的数据。这是包含完整描述的 文档页面（您绝对应该阅读它），但我将尝试在下面概述基础知识。

要求

发送到您的 API 的请求将包含一些您需要处理的数据。

draw 是跟踪请求-响应对集的唯一标识符；响应中的值需要与请求中的值匹配。这就是数据表将请求与响应相匹配的方式。

start 代表应该在响应中排在第一位的记录；如果我们每页显示 10 条记录并且我们在第 2 页， start 将等于 10，因此在响应中我们只发送编号为 10-19 的记录。

length 表示本次抽奖的预期行数，因此在上面第 2 页每页 10 条记录的示例中， length 将等于 10。这就是你有多少条记录应该返回。该值将基于数据表初始化的 lengthMenu 或 pageLength 选项。 （分别记录 在此处 和 此处）

要记住的一件经常被遗忘的重要事情是只发送尽可能多的行 length ;不要在第一个请求中发送所有行。

回复

您的回复也需要更改。基本上，您不仅需要返回 data ，还需要返回一个类似于以下示例的对象（来自该 文档页面）：

 {
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        [
            "Angelica",
            "Ramos",
            "System Architect",
            "London",
            "9th Oct 09",
            "$2,875"
        ],
        [
            "Ashton",
            "Cox",
            "Technical Author",
            "San Francisco",
            "12th Jan 09",
            "$4,800"
        ],
        ...
    ]
}

Note the additional data: draw , recordsTotal , and recordsFiltered in addition to the usual data .使用服务器端处理时，这些是 必需的 选项。

draw 代表你的API请求对应的数字； GET 请求也将有一个 draw 值，并且 GET 中的值必须与响应中的值匹配。

recordsTotal 表示表中的记录总数，跨所有页，其中 recordsFiltered 表示满足GET请求设置的过滤要求的记录数（如果没有过滤，它应该等于 recordsTotal 。

这些是您回复的最低要求元素，但您应该查看链接的文档以获取有关可选值的更多信息。

边注

作为旁注； bServerSide should be serverSide and bPaginate should be paging if you’re using DataTables version 1.10 or later.

原文由 Chris H. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您也可以使用 iDisplayLength 来完成：

 $('#example').DataTable( {
        "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
        "iDisplayLength": 10,
        "bPaginate": true,
        "processing": true,
        "bServerSide": true,

        ajax: {
            url: 'https://api.myjson.com/bins/1egsx',
            dataSrc: 'data'
        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],

    } );

原文由 Sanzeeb Aryal 发布，翻译遵循 CC BY-SA 3.0 许可协议