Question

I am trying to load some JSON data into to a table using the getJSON method but Im getting an Unresponsive Script error in Firefox and in Chrome it crashes.The JSON objet has got over 50,000 items and I’m sure this is causing the script to fail.I was planning to inject the JSON data into a table and use the jquery dataTables plugin for paging,sorting and filtering.

Could some one please suggest a better way of doing what Im trying to do?

$(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);


    });
  });
}); 

I have changed my code to this now but now I get the error json.aaData is UNDEFINED ..js/jquery.dataTables.min.js

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

Answer 1

There is absolutely no need to parse your own table, then trigger datatables on it. Pass your data directly to datatables plugin and let it handle it using data source options from API

Your append for every row is grossly inefficient. datatables will keep most of your data in an object and only generate enough html for the view required