Internet Explorer very slow with around 20000 rows

JohnDoe007

Hi!

I'm trying to use DataTables to handle a table of 20 000 rows on Internet Explorer but I have very bad time of response.
It takes more than 60 seconds to load the page (against 2.4 on Firefox).

I noticed the jQuery function append is reponsible of this problem. But if I switched it to another one (like html), I get a correct time of response but the table doesn't work anymore.

How can I handle it?
Thanks.

bindrid

Are you running with serverSide:true? Can we see some of your code?

JohnDoe007

I'm not using serverSide because I load all the data at first.
I don't know what you want to see because my code looks like the examples on the documentation.

JohnDoe007

The problem is, I guess, DataTables doesn't use append function correctly. As it is said here, it's really faster to give a long string as parameter than a huge DOM Element.

tangerine

....my code looks like the examples on the documentation.

Which example in particular?

JohnDoe007

Here is the code.
HTML :

<div><table id="alarm" class="display" cellspacing="0" width="100%" style="display: none;">
<thead>
            <tr><th>Nom</th>
                <th>Description</th>
                <th>Projet</th>
                <th>Object class</th>
                <th>Object</th>
                <th>Parameter</th></tr>
</thead>
        <tfoot>
            <tr><th>Nom</th>
                <th>Description</th>
                <th id="th_input_project">Projet</th>
                <th>Object class</th>
                <th>Object</th>
                <th>Parameter</th>
</tr>
        </tfoot>
        <tbody>
[... 20 000 rows ...]
</tbody>
</table>
</div>

Javascript :

$('#alarm tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="'+title+'" />' );
    } );

let DOMObject = $('#alarm');
let options = {searchByColumns:true};
let dtOptions = options || { bPaginate: true };
let searchTranslate = 'Search';
if (this.getLang() == 'fr') {
  dtOptions.language = {
    // ...
}

if (!dtOptions.forcePaginate && $('tbody', DOMObject).children().length < 11) {
  dtOptions.bPaginate = false;
};
dtOptions.buttons=['csv'];
let table;
if (dtOptions.searchByColumns) {
  table = DOMObject.DataTable(dtOptions);
  table.columns().every(function() {
    let self = this;
    $('input', this.footer()).on('keyup change', function() {
      if (self.search() !== this.value) {
        self
          .search(this.value)
          .draw();
      }
    });
  });
  let searchFields = $('tfoot tr:first', DOMObject);
  $('thead', DOMObject).append(searchFields);
  $('tfoot tr:first', DOMObject).remove();
} else {
  table = DOMObject.DataTable(dtOptions);
}

allan

You'd be far better Ajax loading that data and enable the deferRender option. See the "speed" FAQ.

Reading 20'000 rows from the DOM is always going to be slow in IE. There really is no way around that.

Allan

JohnDoe007

I didn't know this option.
Thanks a lot. Now, I can load all the in less than 3 seconds with IE.

allan

Yup. Always worth reading the FAQs ;-).

Good to hear you have it working now.

Allan