Eliminate page flashing/redrawing?

TimothyV · April 2020

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)?

kthorngren · April 2020

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

TimothyV · April 2020

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

kthorngren · April 2020

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

TimothyV · 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

kthorngren · April 2020

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

Are you still having issues with this?

Kevin

TimothyV · April 2020

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?

kthorngren · April 2020

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

TimothyV · April 2020

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">

kthorngren · April 2020

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

TimothyV · 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>

kthorngren · April 2020

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

TimothyV · April 2020

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?

kthorngren · April 2020

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

TimothyV · April 2020

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

allan · April 2020

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

TimothyV · May 2020

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

Eliminate page flashing/redrawing?

Eliminate page flashing/redrawing?

Answers

Howdy, Stranger!

Categories

DataTables

Eliminate page flashing/redrawing?

Eliminate page flashing/redrawing?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables