json – jQuery improve dynamically creating table rows

I’m using an ajax request to retrieve data from PHP and then JQuery to append the data to my table.


$.ajax({ url: 'test.php', success: function( html ) {
    $("#table").empty().append( html );


echo "<tr id ='$id'><td>$val1</td><td>$val2</td><td>$val3</td><td>$val4</td></tr>";

There are currently around 10,000 rows of data and this taking about 5 seconds and with the data being around 1.5MB.

I’ve tried using JSON, but that results in a much larger amount of data being returned and is much slower to process it.



$.ajax({ dataType: json, url: 'test.php', success: function( html ) {
    var trHTML = '';
    $.each(response, function (i, item) {
        trHTML += "<tr><td id='" + item.id + "'>" + item.valOne + "</td><td>" + item.valTwo + "</td><td>" + item.valThree + "</td><td>" + item.valFour + "</td></tr>";
    $("#table").empty().append( trHTML );


$arr = array ( 'id' => $id, 'valOne' => $val1, 'valTwo' => $val2, 'valThree' => $val3, 'valFour' => $val4 );
echo json_encode ( $arr );

These are just examples, with the real json index names the data is larger again.

Is there a better way to do this, so I reduce the data returned and make it display faster ?


Read more here: Source link