我现在已经按照答案中的建议设置了加载函数,但是得到了不同的错误:
TypeError: table.column is not a function
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
This report is updated every three minutes. The last update took place at $TIMESTAMP_UPDATE$.<br/>
<div id="colvis" width="100%"></div>
<table id="main_table"></table>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#main_table');
table.load("latest_flight.html", function() {
table.DataTable( {
"paging": true
});
$("#main_table thead th").each( function ( i ) {
var name = table.column( i ).header();
var spanelt = document.createElement( "button" );
spanelt.innerHTML = name.innerHTML;
$(spanelt).addClass("colvistoggle");
$(spanelt).attr("colidx",i); // store the column idx on the button
$(spanelt).on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('colidx') );
// Toggle the visibility
column.visible( ! column.visible() );
});
$("#colvis").append($(spanelt));
});
});
});
</script>
</body>
</html>
考虑以下简单的HTML文件。我无法遍历从单独文件加载的表的标题。为什么呢?
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
<div id="colvis"></div>
<table id="main_table"></table>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#main_table');
table.load("file_with_table.html", function() {
table.DataTable( {
"paging": true
});
});
// ============================================================================
// THE FOLLOWING FAILS, #head DOES NOT HOLD thead's, is it because it's a div?
// ============================================================================
// For each column in header add a togglevis button in the div
$("#table thead th").each( function ( i ) {
var name = table.column( i ).header();
var spanelt = document.createElement( "button" );
spanelt.innerHTML = name.innerHTML;
$(spanelt).addClass("colvistoggle");
$(spanelt).attr("colidx",i); // store the column idx on the button
$(spanelt).on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('colidx') );
// Toggle the visibility
column.visible( ! column.visible() );
});
$("#colvis").append($(spanelt));
});
});
</script>
</body>
</html>
其中file_with_table.html
成立:
<table border="1" class="dataframe" id="my_table">
<thead>
<tr style="text-align: right;">
<th>school</th>
<th>county</th>
<th>zipcode</th>
</tr>
</thead>
<tbody>
<tr>
<td>XX</td>
<td>YY</td>
<td>ZZ</td>
</tr>
<tr>
<td>XX</td>
<td>YY</td>
<td>ZZ</td>
</tr>
</tbody>
</table>
答案 0 :(得分:3)
这是因为加载是异步的,移动加载请求的回调函数内的每个语句。
table.load("file_with_table.html", function() {
table.DataTable( {
"paging": true
});
$("#my_table thead th").each( function ( i ) {
var name = table.column( i ).header();
var spanelt = document.createElement( "button" );
spanelt.innerHTML = name.innerHTML;
$(spanelt).addClass("colvistoggle");
$(spanelt).attr("colidx",i); // store the column idx on the button
$(spanelt).on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('colidx') );
// Toggle the visibility
column.visible( ! column.visible() );
});
$("#colvis").append($(spanelt));
});
});
答案 1 :(得分:2)
.load()
使用AJAX,因此它是异步的。发送AJAX请求后,您的循环立即运行,而不是等待它填充DOM。您需要将循环放入回调函数。
table.load("file_with_table.html", function() {
table.Datatable({
paging: true
});
$("#my_table thead th").each(...);
});
答案 2 :(得分:1)
在我的项目中尝试过这个。只需删除file_with_table.html
中的表格元素,然后将其设置为:
<thead>
<tr style="text-align: right;">
<th>school</th>
<th>county</th>
<th>zipcode</th>
</tr>
</thead>
<tbody>
<tr>
<td>XX</td>
<td>YY</td>
<td>ZZ</td>
</tr>
<tr>
<td>XX</td>
<td>YY</td>
<td>ZZ</td>
</tr>
</tbody>
尝试使用:
$(document).ready(function() {
// load the function
LoadTable();
// fill the table here
function LoadTable() {
$.post("file_with_table.html", function(data) {
$('#main_table').html(data);
});
});
删除file_with_table.html
文件中的表格非常重要,因为我知道您不能在表格中放置表格。
希望这会有所帮助。