数据表 - 在页面加载时，表格布局不会立即加载 [英] 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

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

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?

以下是所涉及的脚本和样式:

Here are scripts and styles involved:

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