Clever Geek Handbook

Datatables - on page load, table layout doesn't load instantly

The problem with datatables.js is when the page loads the paginated css is a bit late, so all data is rendered very quickly before it shows the paginated css.

The same problem shows on this fiddle, on page reload you can see it flashing showing first the table without pagination and then with pagination (but the effect is very fast on this fiddle, especially on chrome, it is slower on firefox and more noticeable (to me), but in my application it is very noticeable and looks bad.
Example Datatables

I've tried to streamline the styles and scripts, also trying to put things in the footer (currently it's all in the header), but that doesn't seem to matter. I also found another data script that shows the same on page load: ( some other sample data ). This is mistake?

Here are the scripts and styles:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  type="text/css" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="{{ base_url }}application/assets/js/datatablejs.js" type="text/javascript"></script>
+3


source to share


1 answer


As per the comment:

CSS

#list {
    display: none;
}


JS:

$('#list').DataTable({
    "columns": [ 
        { 
            "width": "45%" 
        }, 
        null, 
        null
    ],
    "initComplete": function(){ 
        $("#list").show(); 
    }
});

Working JSFidlle is here . Hope it helps.

+4


source






More articles:


All Articles