对json响应使用jquery数据表

Using jquery datatable for the json response

本文关键字：jquery 数据表 json 响应      更新时间：2023-09-26

我的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;
        }
}
}

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

现在我的问题是，基于大量的记录，我可以在for每个循环中看到很多延迟。所以，有人能建议我如何使用jquery中的datatable根据responseinjson值实现分页吗。我在互联网上看到了很多例子，但我无法根据收到的回复来思考如何使用。请对我的问题轻描淡写，如果这听起来很无聊，因为我是网络开发的新手。

附言：我不想使用for每个循环添加到数据表中，因为它会导致与我现在相同的延迟。

重申我对赏金的看法：根据我的代码片段，我在ajax调用中得到了整个json响应。但我发现显示数据需要相当长的延迟，因此显示数据的for each jquery循环花费了太多时间。那么，我是否可以在不跳过整个json响应的情况下对其进行分页呢。

Datatables具有内置的分页功能，但使用服务器端数据源意味着您可以在服务器代码中处理分页。

数据表初始化：

var oTable = $('#mytable').dataTable({
    'bServerSide': true,
    'iDisplayLength': 25,
    'iDeferLoading': 0,
    'sAjaxSource': 'your-url-that-returns-json',
    'bProcessing': true,
    'aoColumns': [
        {
            //...
        }
    ]
});

请注意iDeferLoading的使用，它可以防止页面加载时的初始填充；使用.fnDraw();以便在单击按钮时加载。

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

例如在C#中：

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

jQueryDataTableParamModel 只是一个包含所有数据表参数的类。

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

然后，返回json数据：

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

请参阅以下代码，用于Ajax和Datatable

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

请参阅此处的链接Datatable

您可以这样做（语法也取决于插件版本！）：

1） 声明一个管理您的请求的函数（检查语法，我使用自定义实用程序，但这并不完全是我代码中的内容），它是可重用的：var fnServerData=函数（sSource、aoData、fnCallback、oSettings）{var jqXHR=$.ajax({dataType:'json'，url:s源，data:aoData，成功：fnCallback})；oSettings.jqXHR=jqXHR；返回jqXHR；}；

2） 在数据表声明中引用它，例如：

$（'#example'）.dataTable({"bPaginate"：true，"bServerSide"：true，"iDisplayLength"：10，"iDisplayStart"：0，"sAjaxSource"："yoursource"，"fnServerData"：fnServerData})；

如果您对构建DOM元素所需的时间有问题，我建议您查看构建行和单元格元素的方式对性能的影响。

看看这个JSFiddlehttp://jsfiddle.net/e4oc2jbj/。在我的浏览器上，使用基于jQuery的代码需要200毫秒才能添加1000行，而使用原生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中。

即：

$("#myTable").find("tr:gt(0)").remove();
    var tablevar = $("#myTable");               
    for(var i=1;i<=100;i++){
        var rowNew = $("<tr><td><td></td></tr>");
        rowNew.children().eq(0).text("hola"); 
        rowNew.children().eq(1).text("hola"); 
        rowNew.appendTo(tablevar);
     }

上面的代码将直接创建/渲染行并将其附加到DOM中，这对于任何浏览器来说都是非常昂贵的性能，在您的情况下，我们谈论的是14k行。

因此，除了关于创建行的本地方法的建议外，您还应该考虑（这可能有帮助，但不确定）在内存中创建的前一个元素中创建整个表（请参阅以下答案：如何使用createElement创建新表？或在StackOverflow中搜索其他表。）

然后将整个表附加到DOM中，并根据页面大小呈现/显示行，而不是显示整个表。

它可以帮助您当前代码的另一件事是将表设置为隐藏（这可能会有所帮助，再次不确定）：var tablevar=$（"#myTable"）.hide（）；

希望我的回答能对你有所帮助，但如果没有，你总是可以避免发明轮子：http://www.datatables.net/

关于：

不管怎样，我可以在不跳过整个json响应。

试试JSON.parse，你可以尝试一些设计，比如：

 var myjsobj = JSON.parse('[{"param1":"value111","param2":"value222","param3":"value333"},{"param1":"value1","param2":"value2","param3":"value3"}]');
 //now you could acess to your object using an index
 console.log(myJsObj[0]);  //so "just" left to implement the pagination logic

你需要在json对象中为它添加一个索引，这样你就可以保持的当前位置

我的方法是遍历循环，并在中调用循环中的所有内容

document.setTimeout(function(){}, 0)

这样，所有内容都会被推送到队列中，并且不会阻止用户界面上的交互，因为渲染队列仍然可以在循环之间推送其渲染。。

基本上，它不会垃圾邮件你的堆栈，只是在有时间的时候把它关掉。

我希望你考虑一下我的答案。它在模拟任务中也对我有效；）

相关文章：