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

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,

    } );

});

---

我不断得到

没有找到匹配的记录

Answer 1

TL; DR:您应该使用deferRender客户端处理或服务器端处理deferRender(通过修复JSON数据).这个答案假定您需要服务器端处理.

deferLoading

正确使用服务器端处理时,默认行为是仅根据ajax请求在一个页面上发送行数.你不应该使用deferLoading - 这就是它的作用(来自这里的文档):

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

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

deferRender

deferRender如果你正确使用服务器端处理,你真的不需要使用它们.deferRender将(从这里的文件):

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

请注意这里的重要短语:

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

如果您正确使用服务器端处理,则只应在单个加载中加载每页的行数.deferRender在使用客户端处理时,确实可以选择加速数据表.Serverside处理已经处理了什么deferRender.有关如何加速数据表的信息,请参阅DataTables 常见问题解答中的这张图片:

请注意,它deferRender仅针对客户端强调.这里要注意的是,如果你没有很多行(数万+),你可能不需要使用服务器端处理.

正确使用Serverside处理:

您的问题可能来自于您的API没有为服务器端处理返回正确形式的JSON; 您需要发送的信息不仅仅是要显示的数据.这是包含完整描述的文档页面(您一定要阅读它),但我将尝试概述下面的基础知识.

请求

发送到您的API的请求将包含您需要解决的一些数据.

draw是跟踪请求 - 响应对集的唯一标识符; 响应中的值需要与请求中的值匹配.这就是数据表如何匹配对响应的请求.

start代表应该是响应中第一个的记录; 如果我们每页显示10条记录并且我们在第2页上,start则将等于10,因此在响应中我们只发送编号为10-19的记录.

length表示此绘制的预期行数,因此在上面的第2页上每页10条记录的示例中,length将等于10.这是您应返回的记录数.此值将基于Datatables初始化的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"
        ],
        ...
    ]
}

注意附加数据:draw,recordsTotal和recordsFiltered通常的data.使用服务器端处理时,这些是必需的选项.

draw表示与您的API请求相对应的数字; GET请求也将有一个draw值,GET中的值必须与响应中的值匹配.

recordsTotal表示所有页面中表中记录的总数,其中recordsFiltered表示满足GET请求设置的过滤要求的记录数(如果没有过滤,则应该等于recordsTotal.

这些是您回复所需的最少元素,但您应查看链接文档以获取有关可选值的更多信息.

边注

作为旁注; 如果你正在使用DataTables 1.10或更高版本,bServerSide应该是serverSide也bPaginate应该如此paging.