CODEWITHSUNDEEP
jquery
Kathir
Kathir

Reputation: 2903

Hanging on 1000 or 5000 records in bootstrap table

Nice example is given in the following link

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

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

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

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?

Upvotes: 2

Views: 5950

Answers (2)

solimanware
solimanware

Reputation: 3051

You can do two techniques

  1. Pagination
  2. Virtual Rendering

for virtual rendering, you can use some options like

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

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

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

Upvotes: 3

haMzox
haMzox

Reputation: 2109

Try using: https://clusterize.js.org/
It's a great plugin to display large data sets easily.

Upvotes: 2

Related Questions