数据表页面加载问题答案

【问题标题】：Datatables page loading issue数据表页面加载问题
【发布时间】：2016-02-15 16:22:14
【问题描述】：

我正在使用datatables v1.10.11 和 Jquery v 2.2.0

数据表的一项功能允许使用以下columns.visible API 选项“隐藏”列。

<script type = "text/javascript">
  $(document).ready(function() {
    //Hide the first column with columnDefs:
    $('#example').dataTable({
      "columnDefs": [{
        "visible": false,
        "targets": 0
      }]
    });
  }); 
  </script>

这确实有效，但是在页面加载时，我可以在一瞬间（非常短暂地）看到隐藏的列。

只有在使用 Google Chrome（版本 48.0.2564.103 m）时才会出现这种情况。 IE (11) 和 FFox (41.0.1) 都很好，表格按预期加载，没有“滞后”。

为什么会发生这种情况？我认为这可能与我的 JS 或 CSS 的排序有关，数据表所需的唯一依赖项是 Jquery，我将它放在首位。

请参阅下面我的 JS 和 CSS 的顺序；

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>My Title</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.0.0/css/responsive.bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.1.0/css/select.bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"/>
        <!-- Custom CSS -->
        <link rel="stylesheet" type="text/css" href="css/custom.css"/>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <script src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
        <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
        <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.bootstrap.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.print.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.0.0/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.0.0/js/responsive.bootstrap.min.js"></script>
        <script src="https://cdn.datatables.net/select/1.1.0/js/dataTables.select.min.js"></script>
        <script src="https://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script>
        <script src="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

我不确定如何解决这个问题。我已经尝试重新排序和删除某些 JS 和 CSS 文件，但它似乎没有任何区别。 Chrome 是否存在某种预加载问题？

感谢任何帮助。

【问题讨论】：

您的 javascript 代码是否在 $(document).ready() 或其他页面加载事件中？
好的，看起来页面加载和组件功能加载之间存在一些同步问题。您可以介意为您的列设置一些“默认”CSS。

标签： javascript jquery html css datatable

【解决方案1】：

发生这种情况是因为如果您在 $(document).ready({}); 中，dataTables 在文档加载后运行堵塞。所以基本上这些列不会隐藏，直到 javascript 添加必要的 CSS 来隐藏它们。如果您不想延迟隐藏它们，您可以将自己的自定义 CSS 应用到这些单元格。

只需向它们添加一个类并将 display:none 应用于该类。

或者您可以将表格设置为 display:none，然后在 dataTables 使用initComplete 事件完成初始化时显示它。这样，当它显示时，该列将被隐藏。

<script type = "text/javascript">
    $(document).ready(function() {
        //Hide the first column with columnDefs:
        $('#example').dataTable({
            "columnDefs": [{
                "visible": false,
                "targets": 0
            }],
            "initComplete": function() {
                $(this).show();
            }
        });
    }); 
</script>

更新

提供了一个完整的 jsFiddle，工作示例在这里...

https://jsfiddle.net/rsmcyz4q/

下面的完整示例...

HTML

<table id="example">
<thead>
  <tr>
    <th>COLUMN 1</th>
    <th>COLUMN 2</th>
    <th>COLUMN 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>ROW 1</td>
    <td>ROW 1</td>
    <td>ROW 1</td>
  </tr>
  <tr>
    <td>ROW 2</td>
    <td>ROW 2</td>
    <td>ROW 2</td>
  </tr>
  <tr>
    <td>ROW 3</td>
    <td>ROW 3</td>
    <td>ROW 3</td>
  </tr>  
</tbody>
</table>

CSS

#example { display: none; }

JAVASCRIPT

 $(document).ready(function() {
    //Hide the first column with columnDefs:
    $('#example').dataTable({
      "columnDefs": [{
        "visible": false,
        "targets": 0
      }],
      "initComplete": function() {
        $(this).show();
      }
    });
  });

【讨论】：

@johnny_s，不知道为什么它只发生在 chrome 中。您可以将表格设置为 display:none，然后在 dataTAbles 使用“initComplete”事件完成初始化时显示它。这样，当它显示时，该列将被隐藏。
@johnny_s 我更新了示例以显示 initComplete。如果使用 $(this).show() 不起作用，请尝试使用 $('#example').show();
感谢@Phil，但它不起作用。没发生什么事。每当我用alert( 'DataTables has finished its initialisation.' ); 替换$(this).show(); 时，我都会看到警报。有任何想法吗？我也试过$('#example').show()。
@johnny_s 不确定没有看到更新的代码。您总是可以使用 display:none 将表格包装在一个 div 中，然后在该 div 上的 initComplete 调用 show() 中，依次显示表格。