I am trying to show more than 50k lines in a HTML table but for some reason it takes so much time to show (around 60 seconds), what’s the best practice to load data into HTML tables?
I am using this code:
$('#entities_panel_gridlist').empty();
$('#entities_panel_gridlist').append("<table id='entities_list' width='100%'><tr class='entities_gridlist_heading'><th width='59%'>Name</th><th width='40%'>Hash</th></tr></table>");
var len = myTable.length
for (var i=0; i < len; i++) {
let name = myTable[i][0];
let hash = myTable[i][1];
console.log(i)
$('#entities_list').append('<tr class="rows"><td>'+ name +'</td><td>'+ hash +'</td></tr>');
}
Don’t append your content in your iteration. Just build the HTML in your loop and append it after it’s the loop is done.
Save some rendering resources by collecting the markup in a variable and append it afterwards.