Datatables takes more time to load. Datatables appear after data loads.

Datatables takes more time to load. Datatables appear after data loads.

Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0

Hello, I made a page where I am fetching data from database and displaying it in to html table with Datatables. Page is working perfectly fine but when page load data loads first and after few seconds Datatables appeared. I tried using some options available in FAQ like orderClasses but nothing is working.

Here is the link of page - https://sandpit.assettrack.cx/reportMatrix/reportmatrix.php

Incase if you are not able to view the page here is the picture.

First it loads Data

After it load Datatables like below

Here is code where I used Datatable:

    <?php
    require("../functions/chain.php");


    $sql = " My SQL Query to fetch Data from DB";

    ?>

    <div class='container-fluid ms-7 w-auto'>
      <div class='card'>
        <div class='card-body'>
          <div id='phaseTable' class='content'>

            <table id='reportMatrix' class='stripe row-border order-column' style='width:100%'>
              <thead>

                <tr class=''>

                    <th class='text-center', rowspan="2">Procedure</th>
                    <th class='text-center', rowspan="2">Entity</th>
                    <th class='text-center', rowspan="2">Group</th>
                    <th class='text-center', rowspan="2">All</th>
                    <th class='text-center', rowspan="2">Awaiting Install</th>
                    <th class='text-center', rowspan="2">Installed</th>
                    <th class='text-center', rowspan="2">PICO in Progress</th>
                    <th class='text-center', rowspan="2">PICO Received</th>

                    <th class='text-center', colspan="4">PICO Report Complete</th>
                    <th class='text-center grey', colspan="4">Client Submission</th>
                    <th class='text-center', rowspan="2">%</th>

                </tr>


                <tr class=''>

                    <th class='text-center'>P-MD</th>
                    <th class='text-center'>Pass</th>
                    <th class='text-center'>No Status</th>
                    <th class='text-center'>Fail</th>

                    <th class='text-center grey'>Reviewed</th>
                    <th class='text-center grey'>Reviewed as Noted</th>
                    <th class='text-center grey'>Rejected</th>
                    <th class='text-center grey'>In Review (Submitted)</th>

                </tr>
              </thead>
              <tbody>

    <?php


    if($result = query($sql)){
        while ($row = mysqli_fetch_array($result)) {
            if($loc != "") { ?>

         <tr class=''>

        </tr>

    <?php } 

    ?>

    <?php

    echo " 
              </body>

            </table>
          </div>
        </div>
      </div>
    </div>";
    ?>

    <script>
    $(document).ready(function() {

      var table = $('#reportMatrix').DataTable( { 
        dom: 'lBfrtip',
        processing: true,
        orderClasses: false,

        //TABLE WINDOW
        scrollY:        "50vh",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,

        stateSave: true,
        responsive: true,
        colReorder: true,

        //BUTTONS
          buttons: [],

        //PAGINATION OPTIONS
          pageLength: 50,
          lengthMenu: [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],


      });


        $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e){
            $($.fn.dataTable.tables(true)).DataTable()
            .columns.adjust();

        });


    } );
    </script>

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 16,772Questions: 25Answers: 3,971

    One suggestion is to not show the tab until Datatables has completed initialization or hide the container the table is in. until Datatables has completed initialization. Using initComplete you can show the tab or the container. This way you won't see the transition from the HTML to to the Datatable.

    Kevin

  • Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0

    @kthorngren Hi Kevin.. I tried using initComplete as below. but nothing changed.

        $(document).ready(function() {
    
          var table = $('#reportMatrix').DataTable( { 
            dom: 'lBfrtip',
            processing: true,
            orderClasses: true,
    
            //TABLE WINDOW
            scrollY:        "50vh",
            scrollX:        true,
            scrollCollapse: true,
            paging:         true,
    
            stateSave: true,
            responsive: true,
            colReorder: true,
    
    
    
    
            //BUTTONS
              buttons: [],
    
            //PAGINATION OPTIONS
              pageLength: 50,
              lengthMenu: [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],
    
              initComplete: function(settings, json) {
                  $('div.phaseTable').hide();
              }
          });
    

    I tried using table id as well but its hiding the datatable itself. ( #reportMatrix)

  • kthorngrenkthorngren Posts: 16,772Questions: 25Answers: 3,971

    See if this example helps:
    http://live.datatables.net/mixozala/15/edit

    Kevin

  • Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0

    @kthorngren I tried using example you shared. Still its loading first data with html table and in Datatables columns name disappeared.

        $(document).ready(function() {
    
          document.getElementById('reportMatrix').style.visibility = "hidden";
    
          var table = $('#reportMatrix').DataTable( { 
    
            initComplete: function( settings, json ) {
              document.getElementById('reportMatrix').style.visibility = "visible";
              $('#reportMatrix').DataTable().columns.adjust();
            },
    
            dom: 'lBfrtip',
            processing: true,
            orderClasses: true,
    
            //TABLE WINDOW
            scrollY:        "50vh",
            scrollX:        true,
            scrollCollapse: true,
            paging:         true,
    
            stateSave: true,
            responsive: true,
            colReorder: true,
    
    
    
    
            //BUTTONS
              buttons: [],
    
            //PAGINATION OPTIONS
              pageLength: 50,
              lengthMenu: [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],
    
    
          });
    
    
            $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e){
                $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust();
    
            });
    

  • kthorngrenkthorngren Posts: 16,772Questions: 25Answers: 3,971
    edited June 17

    You will probably want to use style="display:none" on he table tag in HTML instead of a using this in ducment.ready():

    document.getElementById('reportMatrix').style.visibility = "hidden";
    

    The document.ready() function isn't executing until after the HTMl is built, including the table so the timing is wrong to use the command.

    If the header is still missing then maybe you will need to hide the parent div (<div id='phaseTable' class='content'>) instead. If you still need help then please post a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0

    @kthorngren tried both options you suggested. If I use style="display:none" in table tag its not displaying anything on page. Empty data table only.

    And If I hid <div id='phaseTable' class='content'> than datatable is disappear from the page. Only html table display.

    Here is the Link of my page

    https://sandpit.assettrack.cx/reportMatrix/reportmatrix.php

  • kthorngrenkthorngren Posts: 16,772Questions: 25Answers: 3,971

    In the test case I see initComplete commented out and I don't see either the div or table with style="display:none. Please update the test case with one of those hidden and initComplete making the element visible.

    Kevin

  • Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0

    https://sandpit.assettrack.cx/reportMatrix/reportmatrix.php

    Please check above link -

    Without Commented out both - 1) Added style='display:none' and initComplete.

  • Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0

    this one is without style='display:none'. So you can see the problem.

    https://sandpit.assettrack.cx/reportMatrix/reportmatrix.php

  • kthorngrenkthorngren Posts: 16,772Questions: 25Answers: 3,971

    In your HTML you need to use style="display:none" on the div or table tag. On one of these two lines:

         <div id='phaseTable' class='content' style="display:none">
           
            <table id='reportMatrix' class='stripe row-border order-column' style='width:100%'>
    
    

    This way its hidden before populating the. table with your for loop. Then use initComplete to make it visible.

    Kevin

  • Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0
    edited June 17

    <table id='reportMatrix' class='stripe row-border order-column' style="display:none">

        $(document).ready(function() {
    
            document.getElementById('reportMatrix').style.visibility = "hidden";
    
          var table = $('#reportMatrix').DataTable( { 
    
            initComplete: function( settings, json ) {
              document.getElementById('reportMatrix').style.visibility = "visible";
              $('#reportMatrix').DataTable();
            },
    

    Like this ? Its still not displaying any data. Empty Datatable only. Also tried with

    <

    div id='phaseTable' class='content' style="display:none"> - same result

    https://sandpit.assettrack.cx/reportMatrix/reportmatrix.php

  • kthorngrenkthorngren Posts: 16,772Questions: 25Answers: 3,971
    Answer ✓

    Using jQuery toto the element seems to work. Use this instead:

        initComplete: function( settings, json ) {
          $('#reportMatrix').show();
          $('#reportMatrix').DataTable().columns.adjust();
        },
    

    Kevin

  • Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0
  • kthorngrenkthorngren Posts: 16,772Questions: 25Answers: 3,971
    Answer ✓

    That is likely due to using the scrolling features. Datatables clones the header and uses the cloned header for scrolling. Looks like it pickes up the styling of the original table:

    <table class="stripe row-border order-column dataTable no-footer" style="display: none; margin-left: 0px; width: 1172px;">...</table>
    

    So the header is hidden. As I suggested above if the header is missing then hide the parent div instead. In both tabs the parent div has the ID of phaseTable. You will need to rename one of them as the IDs are required to be unique in HTML.

    Kevin

  • Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0

    Changed the id name of parent div and apply style="display:none" but this is the result. Blank only

  • Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0

    I am not sure why but also all other pages on website with HTML table have same parent div with same id= 'phaseTable'

  • kthorngrenkthorngren Posts: 16,772Questions: 25Answers: 3,971
    Answer ✓

    Changed the id name of parent div and apply style="display:none" but this is the result. Blank only

    Not seeing this in your test case. Did you change $('#reportMatrix').show(); to $('#phaseTable').show(); in initComplete?

    I am not sure why but also all other pages on website with HTML table have same parent div with same id= 'phaseTable'

    You can assign the same ID name to multiple elements. The problem is since they are expected to be unique the utilities to get the element by ID like $('#phaseTable') or document.getElementById('phaseTable') will only find one and it may not be the one you want selected.

    Kevin

  • Shivani VyasShivani Vyas Posts: 104Questions: 8Answers: 0

    @kthorngren Thank you Kevin. You are right I forgot to change $('#reportMatrix').show(); to > $('#phaseTable').show(); in initComplete.

    Now its working correctly. Thanks a lot! :)

Sign In or Register to comment.