HTML

Question

我有一个fiddle使ajax成为URL并呈现一个表，但我想在页面加载期间推迟并加载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 - 这就是它的作用（来自documentation here）：

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

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

<强> deferRender

如果你正确使用服务器端处理，你真的不需要使用deferRender。 deferRender会（从documentation here开始）：

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

请注意这里的重要短语：

如果加载10,000行数据集

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

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

正确使用Serverside处理：

您的问题可能来自于您的API没有为服务器端处理返回正确形式的JSON;您需要发送的信息不仅仅是要显示的数据。这是documentation page的完整描述（你一定要读它），但我会尝试概述下面的基础知识。

请求

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

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

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

length表示此绘制的预期行数，因此在上面的第2页上每页10条记录的示例中，length将等于10.这是您应该记录的记录数返回。此值将基于Datatables初始化的lengthMenu或pageLength选项。（分别记录here和here）

要记住的重要一点是经常被遗忘的是只发送与length一样多的行;不要在第一个请求中发送所有行。

<强>响应

您的回复也需要更改。基本上，您需要返回一个类似于以下示例的对象（来自documentation page），而不仅仅是返回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。

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' }
        ],

    } );

Answer 3

我假设您的意图是在页面加载后立即显示DataTable。下面介绍两种根据您的要求加载部分数据的方法。通过触发点击按钮等事件，可以在稍后的时间点加载整个数据。在这两种情况下，整个数据也将被下载并存储在本地，然后可以根据触发的事件加载，以避免再次调用来获取整个数据。

案例1：只想从源下载部分数据

在DataTable处理数据之前，将从“https://api.myjson.com/bins/1egsx”获取整个数据。如果您只想从URL获取部分数据，您可以创建自定义函数，它将以AJAX交互模式（readyState = 3）解析数据，在收到前10个条目后停止，然后按下数据并将其传递为输入DataTable的数据。以下是您需要做的总结

if(_chatDelegate == (id)[NSNull null] || !_chatDelegate)
    Glb.ChatWithUer  = jidString;
else if(_chatDelegate)
    [_chatDelegate newBuddyOnline:[NSString stringWithFormat:@"%@",roomName]  roomJID:jidString];

案例2：仅在下载整个数据后加载前10个条目

假设您可以在显示DataTable之前下载整个数据，您可以为dataSrc创建一个函数，如下所示。这将显示仅返回表中的10个条目。您可以选择将整个JSON存储在浏览器数据存储中的此函数中（如sessionStorage），然后触发JS函数以在稍后的时间点加载整个JSON。

var inputData = '';
function loadDataTablePreview() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 3 && this.status == 200) {
        inputData += this.responseText;
        // Count the number of closing '}'. If its 10, lets start processing our data
        // Get the index of 10 closing '}'
        // Create a substring of inputData
        // append ']}'
        // Now JSON Decode
        var decodedData = JSON.parse(inputData);
        // Now create an instance of the DataTable passing this data as the input data 
        $('#example').DataTable( {
          "bPaginate": true,
          "processing": true,
          "bServerSide": true,
          data: decodedData,
          columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
          ],
        });
    }
    else if (this.readyState == 4 && this.status == 200) {
       // JSON Decode the data and store it to load later
    }
  };
  xhttp.open("GET", "https://api.myjson.com/bins/1egsx", true);
  xhttp.send();
}

$(document).ready(function() {
  loadDataTablePreview();
}

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

HTML

JS

3 个答案:

正确使用Serverside处理：