Column visibility button slow: Loading icon possible onclick?

Column visibility button slow: Loading icon possible onclick?

curioucuriou Posts: 39Questions: 10Answers: 0
edited May 2020 in Free community support

I have large table (60+ columns) where some of the columns are initially hidden on first loading the table. The table has a colvisGroup button that triggers all of the columns to become visible. The issue is that there is an 'column-visibility.dt' event handler that contains a time consuming task for each column that becomes visible, and this event handler is causing the table user interface to freeze for a number of seconds when the colvisGroup button is clicked.

I am not trying to speed up/optimize my event handler code, instead I am wondering how I can modify the colvisGroup button action so that it temporarily hides the table, and shows a loading icon (something like this: https://www.w3schools.com/howto/howto_css_loader.asp) as the event handler code is running so that the user does not have to look at a frozen table screen as they are waiting for all the columns to become visible?

I've provided a pseudo test case below. This example does not include my actual event handler code because it contains work-related code I can't share.
Test case: http://live.datatables.net/giyiwivu/1/edit

Thanks

This question has an accepted answers - jump to answer

Answers

  • curioucuriou Posts: 39Questions: 10Answers: 0
    edited May 2020

    So I looked into the button.action() api method and I am including a test case below that overrides the colvisGroup button's built-in action by attempting to first hide the table and insert a loading icon so that the user does not have to look at a frozen screen while the column visibility functionality is loading. However, I am running into two main issues:

    1) No matter where I place the column visibility function, it continues to run before the table is hidden and the loading icon has been inserted into the DOM. This results in the same frozen screen issue described before. I've tried to address this in my own code using promises and async/await to force the column visibility function to run after the loading icon has been inserted, but it does not help.
    2) When I run table.columns.visible(true) it messes up the layout of the table. But I don't know any other method that shows/hides columns the same way as the colvisGroup button's built-in action?

    Here is a test case that does not include table.columns.visible(true) just so you can see what the loading icon process should ideally look like visually (the button action does not affect column visibility here): http://live.datatables.net/pagubepa/1/edit

    And here is the test case that includes table.columns.visible(true) where I am running into the above two issues (wait about 25 seconds after clicking the button before the screen gets unfrozen): http://live.datatables.net/zewuzamu/1/edit

    Any advice on this would be greatly appreciated.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    You should throw up the Loading icon then do a setTimeout and inside that change the column visibility. That will allow the browser to paint the loading icon before doing the column visibility stuff.

    However, I think we can significantly speed up your example there. The columns().visible() method isn't very smart - it is doing a large number of redraw calculations for every column that is changed state (which is horribly exacerbated when using FixedColumns).

    So if you replace:

        table.columns(':hidden').visible(true);
    

    with:

        table.columns(':hidden').visible(true, false);
        table.draw();
    

    You will see a major performance improvement.

    Allan

  • curioucuriou Posts: 39Questions: 10Answers: 0

    Thanks Allan, yes I realized setTimeout was needed shortly after posting.

This discussion has been closed.