测试了以下网格
观察:
什么是最快的数据网格具有以下功能
我当前最喜欢的表库是Bootstrap-Table
它具有您寻找的所有功能,并且运行良好.
要在10k +记录上实现正常的加载时间,您很可能需要使用AJAX和/或Pagination.
这是一个显示5000个结果正常工作的片段:
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
</head>
<body>
<table data-toggle="table"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-show-export="true"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false"
data-side-pagination="client"
data-url="https://jsonplaceholder.typicode.com/photos">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="title">Title</th>
<th data-field="url">URL</th>
<th data-field="thumbnailUrl">Thumbnail URL</th>
</tr>
</thead>
</body>
</html>所以这里发生了一些改善性能的事情:
由于数据更自然地流向图书馆,我们得到了一个很好的"加载......",这使得用户在内部变得温暖和挑剔.如果不仅仅是因为它正在向用户提供反馈.因此,我们愿意再等几秒钟.
我们正在从包含数据的HTML表切换到JSON对象.
当使用HTML作为数据源时,页面必须完全呈现数据的过于冗长的表示(这会阻止JavaScript表单加载).然后,库加载并开始解析此数据(5,000行X 10列= 50,000个元素).然后库必须将其逻辑应用于DOM.根据代码的编写方式,这将意味着处理所有结果3x.
要么
使用JSON(JavaScript Object Notation)时,HTML页面非常轻,因此它立即完成呈现.此外,数据采用JavaScript的本机语言,因此可直接读入JavaScript对象.该库创建一个对象并将其绑定到表的内容.这意味着需要为表添加1个对象才能开始渲染.
基本上我们正在为结果的渲染添加并行性.因此,所有3个步骤仍在发生,但在前一种情况下,每个步骤都必须等待下一步.而在后一种情况下,步骤是并行发生的.而且,因为我们觉得它在完成一行后就完成加载,所以感觉要快得多.
根据您的请求添加了导出,但实际的库错误可能是代码段工具的限制.