Javascript 对json响应使用jquery datatable

下面是我的json输出

[{"param1":"value1","param2":"value2","param3":"value3"},{"param1":"value1","param2":"value2","param3":"value3"}]

我的ajax请求是在函数中编码的，因此可以根据按钮单击来调用它：

function callAjaxRequest()
{
ajaxRequest = $.get('getdata',{ 'parameter1': paramValue1,'parameter2':paramValue2 },function(responseinjson) {

if(responseinjson!=null){
        $("#table1").find("tr:gt(0)").remove();
        var tablevar = $("#table1");
        $.each(responseinjson, function(key,value) {

             var rowNew = $("<tr><td><td></td></tr>");
                rowNew.children().eq(0).text(value['param1']); 
                rowNew.children().eq(1).text(value['param2']); 
                rowNew.appendTo(tablevar);
        });

        var numberofrecords = responseinjson.length;

        }

}
}

函数callAjaxRequest（）
{
ajaxRequest=$.get（'getdata'，{'parameter1'：paramValue1，'parameter2'：paramValue2}，函数（responseinjson）{
if（responseinjson！=null）{
$（“#表1”）.find（“tr:gt（0）”）.remove（）；
var tablevar=$（“#表1”）；
$.each（responseinjson，函数（键，值）{
var rowNew=$（“”）；
rowNew.children（）.eq（0）.text（值['param1']）；
rowNew.children（）.eq（1）.text（值['param2']）；
rowNew.appendTo（tablevar）；
});
var numberofrecords=responseinjson.length；
}
}
}

我将ajax请求初始化为变量，因为在某些情况下，我可以稍后中止它

现在我的问题是，我可以看到基于大量记录的for-each循环中存在大量延迟。因此，有人能建议我如何使用jquery中的datatable根据

responseinjson

值实现分页吗？我在互联网上看到了很多示例，但我无法了解如何根据我得到的回答是：如果我的问题听起来很难回答，请轻松回答，因为我对网络开发还不熟悉

p.S:我不想使用for each循环添加到datatable，因为它会导致与我现在得到的相同的延迟

重申我的赏金观点：

---

根据我的代码片段，我在ajax调用中得到了完整的json响应。但是我发现显示数据需要相当长的延迟，因此为每个jquery循环显示数据花费了太多的时间。因此，我是否可以在不删除整个json响应的情况下对此进行分页。

有关ajax，请参阅以下代码和数据表

$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax":{ 
               "url" : "../server_side/scripts/server_processing.php",
               "data":{
                       //your variable
                       }
               }
    } );
} );

---

请参阅此处的链接

您可以执行类似操作（语法也取决于插件版本！）：

1） 声明一个管理您的请求的函数（检查语法，我使用自定义实用程序，这与我的代码中的不完全相同），它是可重用的： var fnServerData=函数（sSource、aoData、fnCallback、oSettings）{ var jqXHR=$.ajax({ 数据类型：“json”， 网址：sSource， 数据：aoData， 成功：fnCallback }); oSettings.jqXHR=jqXHR； 返回jqXHR； };

2） 在datatable声明中引用它，例如：

$（'#示例'）。数据表({ “bPaginate”：对， “bServerSide”：正确， “iDisplayLength”：10， “iDisplayStart”：0， “sAjaxSource”：“yoursource”， “fnServerData”：fnServerData

---

});

如果您对构建DOM元素所花费的时间有疑问，我建议您考虑一下构建行和单元格元素的方式对性能的影响

看看这个JSFIDLE。在我的浏览器上，使用基于jQuery的代码添加1000行需要200毫秒，而使用本机DOM方法大约需要7毫秒

var newRow = table.insertRow(0);
var newCell = newRow.insertCell(0);
newCell.appendChild(document.createTextNode(value['param1']));
newCell.appendChild(document.createTextNode(value['param2']));

---

如果性能更好，您可能不需要分页数据？

您可以包括此分页插件，以实现数据表中的分页：

http://www.datatables.net/plug-ins/pagination/

---

除了像@Sam Greendhalgh提到的那样创建DOM元素外，还可以考虑“在内存中”创建一个表，而不是从DOM中获取一个表并向其追加行

我已经测试了您的代码，我发现问题可能是您将元素直接附加到DOM中

i、 e:

---

您需要在json对象中为其添加一个索引，以便保持当前位置的完整性。Datatables具有内置分页功能，但使用服务器端数据源意味着您可以在服务器代码中处理分页

数据表初始化： 注意使用了

iDeferLoading

，这可以防止页面加载时的初始填充；使用

.fnDraw（）以便在单击按钮时加载

当您发出请求时，与分页、搜索、排序等相关的参数，也会将相应的值传递到查询字符串中，以便在查询数据时使用

例如在C#中：

public ActionResult PopulateMyTable(jQueryDataTableParamModel param)
{
    var mydata = query the database
    var results = mydata.Skip(param.iDisplayStart).Take(param.iDisplayLength);
    // ...
}

jQueryDataTableParamModel
只是一个包含所有datatable参数的类

iDisplayStart
和
iDisplayLength
是在请求中传递的参数，用于填充数据表，并用于返回分页数据

然后，返回json数据：

return Json(new {
    param.sEcho,
    iTotalRecords = rowCount,
    iTotalDisplayRecords = rowCount,
    aaData = results
    }, JsonRequestBehavior.AllowGet
);

我的方法是通过循环调用循环中的所有内容

document.setTimeout（函数（）{}，0）

通过这种方式，所有内容都被推送到队列中，并且不会阻塞UI上的交互，因为渲染队列仍然可以在循环之间推送其渲染

基本上，它不会向你的堆栈发送垃圾邮件，只是在有时间的时候将其关闭

希望你考虑我的回答。在一项模拟任务中，它对我也很有效；）
 以较小的块获取数据，如每次分页20条记录，单击并将数据放入表格中。@Jai您能详细说明一下吗？我想使用datatable，以便在默认情况下它提供分页。您看到的延迟可能是由于构建表的方式效率低下。一点字符串连接和一个appendTo（）而不是每行一个appendTo（）无疑会快得多。@wwwmarty我认为最好分页，因为虽然我只追加了一次并使用了字符串连接，但所花费的时间几乎相同。@仪器：如果您一次加载所有数据并将其传递给datatables，那么性能将变得更差，具体取决于数据集的大小。。但是为了解决这个问题，您可以使用datatable服务器端选项并根据请求加载数据。。看看这个：我已经看到了。如何将ajax请求分配给此处的变量，以便
var oTable = $('#mytable').dataTable({
    'bServerSide': true,
    'iDisplayLength': 25,
    'iDeferLoading': 0,
    'sAjaxSource': 'your-url-that-returns-json',
    'bProcessing': true,
    'aoColumns': [
        {
            //...
        }
    ]
});

public ActionResult PopulateMyTable(jQueryDataTableParamModel param)
{
    var mydata = query the database
    var results = mydata.Skip(param.iDisplayStart).Take(param.iDisplayLength);
    // ...
}

return Json(new {
    param.sEcho,
    iTotalRecords = rowCount,
    iTotalDisplayRecords = rowCount,
    aaData = results
    }, JsonRequestBehavior.AllowGet
);