Bootstrap-table: Loading issue with 30000+ rows.

[swarooppallapothu]

Browser is not responding 35-40 sec when i load 30000+ rows with 5 columns(Without pagination).

When i use pagination browser is not responding 20 Sec.

Issue With all browsers.

how can i do fast loading.

[wenzhixin]

The same problem with: #1195, #93

[tm1000]

I have spent the last few hours looking more closely into this. I have a result set with 97,000 rows and I have the page size set to "All" (This can also happen when not having any pagination).

I've narrowed down the slowness to https://github.com/wenzhixin/bootstrap-table/blob/95e20a6b46ede0fba7ef0de816a48095fd8d8a62/src/bootstrap-table.js#L1788

Specifically
this.$body.html(html.join(''));

At first I thought it might be jquery slowing it down so I tried to manipulate the dom directly, bypassing jquery using this:

this.$body[0].innerHTML = html.join('');

That didn't really seem to have much effect. The browser still "hung" for long periods of time (over 60s)

I even tried bypassing html.join(''); thinking it might have been the join that was causing the hanging, however ".join" was very fast.

Unfortunately you can't get much deeper than innerHTML as it's a direct DOM manipulation and avoids all jquery.

There were a few other work arounds I tried looking at various articles about innerHTML speed such as this one:

Replace:

this.$body.html(html.join(''));

With:

var replaceHtml = function(el, html) {
          var oldEl = (typeof el === "string" ? document.getElementById(el) : el);
          var newEl = document.createElement(oldEl.nodeName);
          // Preserve the element's id and class (other properties are lost)
          newEl.id = oldEl.id;
          newEl.className = oldEl.className;
          // Replace the old with the new
          newEl.innerHTML = html;
          oldEl.parentNode.replaceChild(newEl, oldEl);
          /* Since we just removed the old element from the DOM, return a reference
          to the new element, which can be used to restore variable references. */
          return newEl;
};

this.$body[0] = replaceHtml(this.$body[0], html.join(''));

But again there was no noticeable improvement. The overall slowdown or browser "hang" with these large datasets has to do with the end result being the large manipulation of the DOM which browsers do not seem to deal with well (they have to first remove all html, then remove handlers against that html then add the new html then add handlers, etc)

Note: Using .append or .prepend doesn't help either as the browser seems to do the same amount of work (actually more) than html(). There are also various articles pointing to the same fact, these articles suggest the use of join(), so we are already good there.

I think the long term solution is if your dataset is that massive you should not display the "All" page size and you should use server-side pagination. Basically don't let the browser deal with more than 10,000 rows of data at once.

Edit:
Here is another function test as well:
Replace:

this.$body.html(html.join(''));

With:

var replaceHtml = function(el, html) {
    var oldEl = typeof el === "string" ? document.getElementById(el) : el;
    /*@cc_on // Pure innerHTML is slightly faster in IE
        oldEl.innerHTML = html;
        return oldEl;
    @*/
    var newEl = oldEl.cloneNode(false);
    newEl.innerHTML = html;
    oldEl.parentNode.replaceChild(newEl, oldEl);
    /* Since we just removed the old element from the DOM, return a reference
    to the new element, which can be used to restore variable references. */
    return newEl;
};

this.$body[0] = replaceHtml(this.$body[0], html.join(''));

[waspinator]

would server side work better for so many rows?

[tm1000]

server side works better yes with a few stipulations but you'll have still the issue when you go above 10,000 records/rows displayed all at one (use "All" for example)

[wenzhixin]

Thanks for your time @tm1000, close the issue.

[sadafr]

The solution provided here worked for me for bootstrap version 1.8.1. Now i have upgraded to version 1.11 and again facing same issue even with 10,000 records. Test with IE chrome and Firefox, all are taking too much time to load grid that is more than a minute or two for this number. Kindly suggest me a solution for this as my records might go more than 80,000 with 'All' option and I have serve side pagination.

In addition, guide me can we integrate https://clusterize.js.org/ with bootstrap table ??

Awaiting for your reply.

Thanks.