数据表-在页面加载时，表布局不会立即加载 [英] Datatables - on page load, table layout does not load instantly

问题描述

datatables.js存在问题-当页面加载时，带有分页的css会稍有延迟，因此在显示带有分页的css之前，整个数据会非常快速地显示.

There's a problem with datatables.js - when the page loads, the css with pagination is slightly delayed, so the whole data shows very quickly initally before it shows the css with pagination.

此小提琴上出现了相同的问题，重新加载页面时，您会看到它闪烁，首先显示没有分页的表格，然后显示有分页的表格(但是此小提琴上的效果非常快，尤其是在chrome上；在Firefox上，效果较慢(对我而言)更引人注意，但是在我的应用程序中，它非常引人注目且外观很差.
数据表示例

The same problem shows on this fiddle, when reloading the page you can see that it blinks, showing first the table without pagination, then with pagination (but the effect is very fast on this fiddle especially on chrome; on firefox it's slower and more noticable (for me), but on my application it is very noticable and bad looking.
Datatables example

我尝试订购样式和脚本，也尝试将内容放在页脚中(当前全部在页眉中)，但这似乎无关紧要.我还发现了另一个带有数据表的小提琴，它在页面加载时显示了相同的内容:(其他一些数据表示例 ).是虫子吗?

I have tried to order styles and scripts, also trying to put things in the footer (currently it's all in the header) but it doesn't seem to matter. I also found another fiddle with datatables which shows the same thing on page load: ( some other datatables example ). Is it a bug?

这里涉及脚本和样式:

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

推荐答案

根据评论:

CSS:

#list {
    display: none;
}

JS:

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

正在工作的JSFidlle 此处.希望有帮助.

Working JSFidlle here. Hope that helps.

这篇关于数据表-在页面加载时，表布局不会立即加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！