數據表網頁加載問題

我使用datatables v1.10.11和jQuery 2.2.0 v數據表網頁加載問題

一個數據表的功能，允許使用以下columns.visible API選項欄的「隱藏」。

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

再次，這工作，但在頁面加載我可以看到隱藏的列秒（非常簡短）。

這似乎只使用谷歌瀏覽器（版本48.0.2564.103米）的時候是這樣。 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是否存在某種預加載問題？

任何幫助表示讚賞。

來源

2016-02-15 johnny_s

是一個$（文件）。就緒（內你的javascript代碼）或其他頁面加載事件？ – RPichioli

好吧，看起來像頁面加載和組件的功能加載之間的一些同步問題。您可以介意爲您的列設置一些「默認」的CSS。 – RPichioli

它的發生，因爲數據表，如果你在$（文件）。就緒是文檔加載後運行（{}）;塊。所以基本上這些列在javascript添加必要的CSS來隱藏它們之前不會隱藏。如果您不想延遲隱藏它們，則可以將自己的自定義CSS應用於這些單元格。

只是一個類添加到他們和應用顯示：沒有到類。

或者你可以設置表顯示：無，然後顯示它在數據表完成使用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>

UPDATE

提供了完整的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(); 
     } 
    }); 
    });

來源

2016-02-15 16:26:08 Phil

@johnny_s，不知道爲什麼它只發生在鉻。您可以將表設置爲顯示：none，然後在使用「initComplete」事件初始化dataTable時顯示它。這樣，當它顯示時，該列將被隱藏。 – Phil

@johnny_s我更新了示例以顯示initComplete。如果使用$（this）.show（）不起作用，請嘗試使用$（'＃example'）。show（）; – Phil

感謝@Phil然而它不工作。什麼都沒發生。每當我用'alert（'DataTables完成初始化''）替換'$（this）.show（）;'''我看到警報。有任何想法嗎？我也試過'$（'＃example'）。show（）'。 –

數據表網頁加載問題

回答

相關問題