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.

JQuery:

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

PHP:

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.

eg:

JQuery:

$.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 );
})

PHP:

$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 ?

Thanks