我正在使用 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 是否存在某种预加载问题？
感谢任何帮助。
最佳答案
发生这种情况是因为如果您在 $(document).ready({}) 中，dataTables 在文档加载后运行；堵塞。所以基本上这些列不会被隐藏，直到 javascript 添加必要的 CSS 来隐藏它们。如果您不想延迟隐藏它们，您可以将自己的自定义 CSS 应用于这些单元格。
只需为它们添加一个类并将 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();
}
});
});
关于javascript - 数据表页面加载问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35414209/