Very poor performance when using Responsive:true and 250+ rows

Very poor performance when using Responsive:true and 250+ rows

teztingtezting Posts: 2Questions: 1Answers: 0
edited May 2020 in Free community support

Hi,
We have been using responsive:true (2.2.3) for some time without noticing any issues.
Now we have increased the rows from 25 to 250 and the render time has increased so much that it must be a bug.

It goes from 128ms to ~1-1.4sec seconds and we are talking render time only! Excluding the ajax call/server respond.
The same will happen if I init it after with new $.fn.dataTable.Responsive(table)

When I have 25 it is ~27ms vs. 45ms so you dont notice it. But when increasing it to 250 rows something happens.

If I try and remove columns it gets better, but still with only one column with simple text its "slow".
As soon as I set responsive:false it will be fast.

Is this really normal? Or can I set something to speed op the render?

Render speed is calculated by:
Starting the time with - on('xhr.dt'..)
Ending the time with on('processing.dt'...) processing == false

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    This section of the FAQ should help, it discusses various techniques to improve performance,

    If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • teztingtezting Posts: 2Questions: 1Answers: 0
    edited May 2020

    Hi,
    I have read the FAQ and the rules. But hoped my description was enough. Trying to replicate it in Codebin I found the BUG in DT and it is real lame... (Unless there is something in the documentation I have missed)

    I am using Class conditions for the responsive "className": "min-tablet " etc.
    But I had ONE column that had no specific className (wanted it to be visible all the time so did not add any). When I add "className": "all" the core rendering is 9x faster! and the problem is solved.
    I hope my frustration/find can help someone else.

    This means that is is also not enough to only use visibility as suggested here. You MUST always add a valid className or it will be 9 times slower

This discussion has been closed.