Question

我正在尝试使用getJSON方法将一些JSON数据加载到表中但是我在Firefox和Chrome中遇到了无响应的脚本错误它崩溃了.JSON对象已经有超过50,000个项目我确定这是造成的失败的脚本。我计划将JSON数据注入表中，并使用jquery dataTables插件进行分页，排序和过滤。

有人可以建议一个更好的方法来做我想做的事情吗？

$(document).ready(function(){
  $.getJSON("items.php",function(result){
    $.each(result, function(i, field){

       var html = '<tr><td>' + field['id'] + '</td>';
       html+='<td>'+ field['name'] + '</td>';
       html+='<td>'+ field['price'] + '</td></tr>';

       $('#itemsTable').append(html);


    });
  });
});

我现在已将代码更改为此，但现在我收到错误json.aaData is UNDEFINED ..js / jquery.dataTables.min.js

$('#tbData').dataTable( {
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": 'items.php'
                } );

Answer 1

一个选项是使用分页100获取数据，在100之后直到所有数据。

$(document).ready(function(){
  $.getJSON("items.php?start=0&end=100",function(result){
    $.each(result, function(i, field){

       var html = '<tr><td>' + field['id'] + '</td>';
       html+='<td>'+ field['name'] + '</td>';
       html+='<td>'+ field['price'] + '</td></tr>';

       $('#itemsTable').append(html);


    });
  });


$.getJSON("items.php?start=100&end=200",function(result){
    $.each(result, function(i, field){

       var html = '<tr><td>' + field['id'] + '</td>';
       html+='<td>'+ field['name'] + '</td>';
       html+='<td>'+ field['price'] + '</td></tr>';

       $('#itemsTable').append(html);


    });

});

喜欢这样直到...

或者说，增加网络的开始和结束。

这里你可以一个接一个地或者连续串起来。

Answer 2

绝对不需要解析自己的表，然后触发数据表。将数据直接传递给datatables插件，并使用API

中的数据源选项进行处理

你对每一行的追加都是非常低效的。数据表将大部分数据保存在一个对象中，并且只为所需的视图生成足够的html

jQuery getJSON无法正常工作，得到Unresponsive Script错误

2 个答案: