訪問從另一個文件加載的ID
[英]Accessing an id loaded from another file
問題描述
更新資料
正如答案中所建議的，我現在在load函數中擁有了一切，但得到了另一個錯誤：
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所在的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>
3 個解決方案
解決方案1
3 2015-09-04 00:52:30
這是因為加載是異步的，所以將每個語句移到加載請求的回調函數中。
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));
});
});
解決方案2
2 2015-09-04 00:54:28
.load()使用AJAX，因此是異步的。 發送AJAX請求后，循環將立即運行，而不是等待它填充DOM。 您需要將循環放入回調函數中。
table.load("file_with_table.html", function() {
table.Datatable({
paging: true
});
$("#my_table thead th").each(...);
});
解決方案3
1 2015-09-04 01:48:24
在我的項目中嘗試過。 只需刪除file_with_table.html中的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>
並嘗試使用此：
$(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文件中的表很重要，因為據我所知，您不能將表放在表中。 希望這可以幫助。
從動態加載的外部 javascript 文件訪問變量
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.