在HTML表格中显示数据的最佳实践

Question

我试图在一个HTML表中显示超过50k行，但由于某种原因它需要很长时间来显示(大约60秒)，将数据加载到HTML表中的最佳实践是什么?我正在使用这个代码:

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

Answer 1

通过在变量中收集标记并在后面附加标记来节省一些渲染资源。

$('#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;
var markup = '';
for (var i=0; i < len; i++) { 
let name = myTable[i][0]; 
let hash = myTable[i][1]; 
var markup += '<tr class="rows"><td>'+ name +'</td><td>'+ hash +'</td></tr>';
}
$('#entities_list').append(markup);

Answer 2

对于大卷，添加更多的排序和搜索工具

!一次5万行太多了。用户应该只需要看第一行就知道整个表的内容是什么样子。

寻找更高级的表工具，例如分页或搜索。下面是Material Angular表分页的样子:https://stackblitz.com/angular/byrxvplrqxv?file=src%2Fapp%2Ftable-pagination-example.ts