Eliminate page flashing/redrawing?

Eliminate page flashing/redrawing?

TimothyVTimothyV Posts: 34Questions: 7Answers: 0

Is it possible with https://datatables.net/examples/basic_init/zero_configuration.html to eliminate page flashing/redrawing when the user manually refreshes the page by clicking on the Refresh button in the browser (Chrome, Edge, Firefox and Internet Explorer)?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    In that case the HTML table is shown first before Datatables is initialized. You can hide the div or table. Using initComplete you can show the table and use columns.adjust() to have Datatables recalculate the column widths after showing the table. Here is an example:
    http://live.datatables.net/qizunuwe/1/edit

    Kevin

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

    Kevin, thank you for the quick reply. I appreciate your time. I tried:

    $(document).ready( function () { var table = $('#example').DataTable({ initComplete: function () { var api = this.api(); $('#example').show(); api.columns.adjust(); } }); } );

    I receive the following error:

    DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Did you read the instructions provided in the link?
    http://datatables.net/tn/3

    Do you have another Datatables initialization code? If so just add the initComplete to it or merge with an existing initComplete.

    Kevin

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0
    edited April 2020

    Kevin, I am so sorry. Your comments are valid, I did read the article at http://datatables.net/tn/3 but could not understand what I am doing wrong.

    My complete code is:

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    
    <script type="text/javascript" charset="utf-8">
        $(document).ready( function () {
          var table = $('#example').DataTable({
            initComplete: function () {
              var api = this.api();
              $('#example').show();
              api.columns.adjust();
            }
          });
        } );
    </script>
    
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
        </tbody>
    </table>
    

    I truly appreciate all you can do to assist me in this.

    Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    I copied your code here and it works:
    http://live.datatables.net/qofolabe/1/edit

    Are you still having issues with this?

    Kevin

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

    Kevin, thank you for your help. I copied the code from http://live.datatables.net/qofolabe/1/edit back to the project and it runs fine without the error but there is still flashing/redrawing when the user manually refreshes the page by clicking on the Refresh button in the browser. This is what I am trying to eliminate. Is this not possible?

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Sorry should have mentioned that I added style="display:none" to the -table in my example. Looks like you are missing it. This way the table is hidden when the page loads.

    Kevin

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

    Kevin, thank you again. I so appreciate you sticking with me on this. I feel we are really close. I tried that but it didn't help.

    <

    table id="example" style="display:none">

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    That's strange. Not sure why style="display:none" doesn't work on the table like in my example. I placed the table inside a div that has style="display:none". It hides the table on page load:
    http://live.datatables.net/qofolabe/3/edit

    Kevin

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0
    edited April 2020

    Kevin,

    Thanks for trying. I copied your code from http://live.datatables.net/qofolabe/3/edit into my project and there is still flashing when I manually click on the Refresh button. I will keep looking for a solution. This is my complete code:

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            var table = $('#example').DataTable({
                initComplete: function () {
                    var api = this.api();
                    $('#myDiv').show();
                    api.columns.adjust();
                }
            });
        });
    </script>
    
    <div id="myDiv"style="display:none;">
        <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
            </tbody>
        </table>
    </div>
    
  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    If I go to full page with the example ( http://live.datatables.net/qofolabe/3 ) and click refresh I do see a quick flash. Is that what you are trying to fix?

    As an experiment you could remove the Datatables code:

            var table = $('#example').DataTable({
                initComplete: function () {
                    var api = this.api();
                    $('#myDiv').show();
                    api.columns.adjust();
                }
            });
    

    Then load the page. Is the HTMl table hidden?

    Kevin

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

    Thank you Kevin. Yes it is the flashing and redrawing of the table when you click on the Refresh button in your browser that I am trying to eliminate. Is this not possible?

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    I thought you were trying to eliminate the quick flash of the HTML table in this example. One of the developers, @allan or @colin may be able to tell you if there is a way to eliminate the flash that happens when displaying the Datatable on the page.

    Kevin

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

    Thank you Kevin for your time and effort, it is much appreciated! Would @allan or @colin respond to this post?

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Answer ✓

    What you are seeing is a FOUC (Flash Of Unscripted/Unstyled Content). Kevin's answer above is about as good as it gets for being certain that the table is drawn correctly without showing the unstyled state.

    The reason for that is that the browser will attempt to draw the page as quickly as possible - so if it needs to delay to a script for example, then it is going to draw the HTML so the user can start reading. So the key to minimising the FOUC is to make everything as fast as possible - use Ajax loaded data for the table, cache the script and styling files, etc.

    One easy way to reproduce a FOUC is have a massive HTML table (no ajax loading) - because it takes a finite time to download, the browser will probably be able to display the start of the table before it has all downloaded.

    Allan

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

    Allan, sorry for the delay, yet thank you for your time and explanation.

This discussion has been closed.