DataTable not styling correctly when FadeIn() used

DataTable not styling correctly when FadeIn() used

sjw01sjw01 Posts: 67Questions: 36Answers: 1

I have graphs and tables (including DataTables) on pages which load using jQuery
Because some data loads on $(document).ready(); I have decided to use fadeIn() to show the page delayed (providing enough time for the page to draw and elements to load)
BUT ... Now my dataTable has a width:0 applied to it making it look bad... Why? How do I remove this unnecessary action?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    You need to use columns.adjust() when the table is made visible.

    The problem is that when you hide the element (display:none) it has no height or width so its impossible for DataTables to do any width calculations (hence why it turns out as 0). columns.adjust() immediately after your fadeIn will fix that.

    Allan

  • sjw01sjw01 Posts: 67Questions: 36Answers: 1

    I found the issue was with the way I loaded the DataTable. Loading the data via ajax meant that the data was loading at the same time as the DataTable. Effectively, I believe that the DataTable was being loaded a fraction of a second before the data was present from the Ajax call.

    To fix it, I simply delayed the loading of the DataTable by putting it inside a function and then using setTimeout()

    setTimeout(function() {initialiseDataTable()}, 100);
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited July 2021 Answer ✓

    Ajax is an asynchronous process. If you have code that depends on Datatables being fully initialized with the data loaded then use initComplete. Don't use the setTimeout but move your function call into initComplete.

    Kevin

Sign In or Register to comment.