Question

我的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请求初始化为变量，因为我可以稍后在某些情况下中止它。

现在我的问题是我可以根据大量的记录在每个循环中看到很多延迟。那么，有人可以建议我如何使用jquery中的datatable根据responseinjson值实现分页。我在互联网上看到了很多例子，但是根据我得到的反应，我无法理解如何使用它。如果它听起来像菜鸟，请放轻松我的问题，因为我是网络开发的新手。

P.S：我不想为每个循环添加数据表使用，因为它会导致我现在得到的延迟相同。

重申我对赏金的看法： 根据我的代码片段，我在ajax调用中获得了整个json响应。但我发现显示数据需要相当长的时间，所以每个jquery循环显示数据都需要花费太多时间。所以，无论如何，我可以在没有完成整个json响应的情况下对其进行分页。

Answer 1

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＆amp; iDisplayLength是在填充数据表的请求中传递的参数，用于返回分页数据。

然后，返回json数据：

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

Answer 2

请参阅以下代码，了解Ajax和Datatable

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

请参阅此处的链接Datatable

Answer 3

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

1）声明一个管理你的请求的函数（检查语法，我使用自定义实用程序，这不是我在我的代码中所拥有的），它是可重用的： var fnServerData = function（sSource，aoData，fnCallback，oSettings）{ var jqXHR = $ .ajax（{ dataType：＆＃39; json＆＃39;， url：sSource，数据：aoData，成功：fnCallback }）; oSettings.jqXHR = jqXHR; 返回jqXHR; };

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

$（＆＃39;＃示例＆＃39）。dataTable中（{ ＆＃34; bPaginate＆＃34;：是的，＆＃34; bServerSide＆＃34;：是的，＆＃34; iDisplayLength＆＃34;：10，＆＃34; iDisplayStart＆＃34;：0，＆＃34; sAjaxSource＆＃34;：＆＃39; yoursource＆＃39;，＆＃34; fnServerData＆＃34;：fnServerData }）;

Answer 4

如果您在构建DOM元素所花费的时间方面存在问题，我建议您查看构建行和单元元素的方式对性能的影响。

看看这个JSFiddle http://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']));

也许有更好的性能，你不需要分页数据？

Answer 5

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

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

Answer 6

除了像@Sam Greendhalgh所提到的那样创建DOM元素，考虑创建一个表＆＃34; in-memory＆＃34;而不是从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行。

除了关于创建行的本机方法的建议之外，您应该考虑（可能有帮助，不确定）在内存中创建的前一个元素中创建整个表（请参阅此答案：How to use createElement to create a new table?或搜索其他人在StackOverflow中。）

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

它可以帮助你当前的代码的另一件事是将表设置为隐藏（它可能有帮助，再次不确定）： var tablevar = $（＆＃34;＃myTable＆＃34;）。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对象中为其添加索引，以便保留当前位置

Answer 7

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

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

这样一切都被推入队列中，并且不会阻止你在UI上的交互，因为你的渲染队列仍然可以在你的循环中推动它的渲染..

基本上它不会对您的堆栈发送垃圾邮件，只是在有时间的情况下将其解决。

我希望你考虑我的答案。它对我来说也是一个类似的任务;）

使用jquery数据表进行json响应

7 个答案:

数据表初始化：