jquery - 卡在 bootstrap 表中的 1000 或 5000 条记录上

标签 jquery

下面的链接给出了很好的例子

http://issues.wenzhixin.net.cn/bootstrap-table/

但是,当分页大小从 10 更改为 1000 或 5000 时,浏览器会挂起超过 20 秒或一分钟来填充网格

数据中的记录数为 5,000 行。

数据表能够处理 5,000 条记录,但不确定此引导表问题。

如何提高性能或解决问题?是否已经存在解决此问题的解决方案?

最佳答案

你可以采用两种技术

  1. 分页
  2. 虚拟渲染

对于虚拟渲染,您可以使用一些选项,例如

  1. SlickGrid

"SlickGrid utilizes virtual rendering to enable you to easily work with hundreds of thousands of items without any drop in performance. In fact, there is no difference in performance between working with a grid with 10 rows versus a 100’000 rows."

  • Clusterize.js
  • The main idea is not to pollute DOM with all used tags. Instead of that - it splits the list to clusters, then shows elements for current scroll position and adds extra rows to top and bottom of the list to emulate full height of table so that browser shows scrollbar as for full list

  • w2ui
  • I think that 1MIL of records for JavaScript is too much, though it is doable. If user has to wait over a second it makes user experience sluggish and unpleasant. But as seen in the tables above any browser can give you a good user experience with 100K of records or less.

    关于jquery - 卡在 bootstrap 表中的 1000 或 5000 条记录上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45875010/

    相关文章:

    javascript - Textarea\n 到 <br> 不转义

    javascript - 识别代码标签之间的代码是 JavaScript 还是 HTML

    jquery - 如何将覆盖表格的 div 粘贴到一个特定位置?

    javascript - 函数在 Chrome/Safari 中有效,但在 Firefox 中无效

    页面转换发生后,jQuery Mobile 获取导致页面转换的单击项目的 ID

    javascript - Laravel - 将 JSON 响应包装在文本区域中

    javascript - 在js中重置单选按钮和复选框值

    jQuery 监听跨度数的变化

    jquery - 替换 i18next 中的变量

    jquery - XMLHttpRequest 无法使用 jQuery 加载 URL