数据表 - 在页面加载时，表格布局不会立即加载

Posted 2023-05-07

【中文标题】数据表 - 在页面加载时，表格布局不会立即加载

【英文标题】：Datatables - on page load, table layout does not load instantly

【发布时间】：2017-10-08 07:11:56

【问题描述】：

datatables.js 有一个问题——当页面加载时，分页的 css 会稍微延迟，所以整个数据在显示分页的 css 之前很快就显示出来了。

同样的问题出现在这个小提琴上，当重新加载页面时，你可以看到它闪烁，首先显示没有分页的表格，然后显示分页（但效果在这个小提琴上非常快，尤其是在 chrome 上；在 firefox 上它更慢并且更引人注目（对我而言），但在我的应用程序中它非常引人注目且看起来很糟糕。Datatables example

我尝试订购样式和脚本，还尝试将内容放在页脚中（目前都在页眉中），但这似乎并不重要。我还发现了另一个使用数据表的小提琴，它在页面加载时显示相同的内容：（some other datatables example）。是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>

【问题讨论】：

我相信任何修改某些标记的 jQuery 插件都有同样的问题。这就是事情的运作方式，你有一个食物链：一些标记 -> 做一些事情。如果您真的认为这是一个问题，您可以隐藏表格并在initComplete 上显示它...

【参考方案1】：

根据评论：

CSS：

#list 
    display: none;

JS：

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

工作 JSFidlle here。希望对您有所帮助。

【讨论】：

哇，看起来好多了。伟大的！ :)

这是最好的解决方案！