挂在引导表中的1000或5000条记录上 [英] Hanging on 1000 or 5000 records in bootstrap table

查看:77
本文介绍了挂在引导表中的1000或5000条记录上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Nice example is given in the following link

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

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

However the browser hangs for more than 20 seconds or a minute to populate the grid when the pagination size is changed from 10 to 1000 or 5000

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

Number of records in the data is 5,000 rows.

数据表能够处理5,000条记录,但不能确定是否存在此引导表问题.

Datatables are able to handle 5,000 records but not sure with this bootstrap table issue.

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

How to improve the performance or fix the problem? Is any solution already exist to resolve this issue?

推荐答案

您可以做两种技巧

  1. 分页
  2. 虚拟渲染

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

for virtual rendering, you can use some options like

  1. SlickGrid

"SlickGrid利用虚拟渲染使您轻松工作 拥有数十万个项目,而性能却没有任何下降. 实际上,使用 10行与100'000行的网格."

"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."

  1. Clusterize.js

主要思想是不使用所有使用的标签污染DOM.代替 -将列表拆分为簇,然后显示当前元素 滚动位置,并在列表的顶部和底部添加额外的行,以 模拟桌子的全高,以便浏览器按原样显示滚动条 完整列表

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

  1. w2ui

我认为JavaScript记录的1MIL太多了,尽管它是 可行的.如果用户必须等待一秒钟,则可以带来用户体验 呆滞和不愉快.但是从任何浏览器上方的表格中可以看出 100K或更少的记录可以为您带来良好的用户体验.

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.

这篇关于挂在引导表中的1000或5000条记录上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆