我正在构建一个页面，该页面进行 Ajax 调用来检索 .csv 文件，并将值加载到 HTML 表中。我在 HTML 文件底部的 $(document).ready(function(){ ltm.init(); }); 调用中调用它。
它循环遍历 CSV 文件的行，并在 JavaScript 变量中构造一个 HTML 表格，然后使用 $('#myTable').html(table_data) 将表格交给 DOM。下一个函数 ltm.convertTableToDataTable() 使用 $('#myTable').DataTable() 将其转换为简单的 DataTable。然而，它并没有发射。我添加了一个按钮来调用 convertTableToDataTable() 函数，当我单击它时，它工作正常，并且 DataTable 功能齐全。
如果我将 alert() 放入 ConvertTableToDataTable 中紧邻 $('#myTable').DataTable() 之前，则会显示警报，并且表格会转换适本地。如果我将警报移至 .DataTable() 调用之后，则会显示警报，并且表格不会转换。
我尝试使用 setTimeout($('#myTable').DataTable(),5000); 在 .DataTable() 调用之前引入延迟，但这不起作用要么。
如何在不发出警报的情况下将其加载到数据中并在我的页面上创建 DataTable 事物？
这是我的通用 JavaScript 片段:
var ltm = {
// local variables
urlCSV: 'myData.csv',
init: function() {
ltm.loadCSVDataIntoTable();
//alert('convertTableToDataTable fired!');
ltm.convertTableToDataTable();
// Bind click events
$('#btnLoadCSVData').click(function() {
ltm.loadCSVDataIntoTable();
});
$('#btnMakeDataTable').click(function() {
ltm.convertTableToDataTable();
});
},
loadCSVDataIntoTable: function() {
// The URL contains the .csv file. The first row of the file is the column headers.
$.ajax({
url:ltm.urlCSV,
dataType:"text",
success:function(csvData) {
var my_data = csvData.split(/\r?\n|\r/);
// var table_start = '<table class="table table-bordered table-striped" id="tblLTMStrains">';
var table_start = '<table class="display" id="tblLTMStrains">';
var table_end = '</table>';
var table_head_start = '<thead><tr>';
var table_head_end = '</tr></thead>';
var table_head = '';
var table_foot_start = '<tfoot><tr>';
var table_foot_end = '</tr></tfoot>';
var table_body_start = '<tbody>';
var table_body_end = '</tbody>';
var table_rows = '';
var table_data = '';
for(var intRow = 0; intRow<my_data.length; intRow++)
{
if (intRow===0) { // First row contains column headers
var cell_data = my_data[intRow].split(",");
for(var cell_intRow=0; cell_intRow<cell_data.length; cell_intRow++)
{
table_head += '<th>'+cell_data[cell_intRow]+'</th>';
}
} else {
if (my_data[intRow].length > 0) { // Gracefully handle null lines
var cell_data = my_data[intRow].split(",");
var blnLoadRow = true;
if ([Some conditions under which I want to filter out the row]) {
blnLoadRow = false;
}
if (blnLoadRow){
var thisRow = $('#templateDataRow').html();
// Can't put the <tr> content in a DIV without it stripping out all the tags
// Also, even if I don't put a <tbody> in, the DOM will create one anyway, so strip it out too.
thisRow = thisRow.replace("<table>","");
thisRow = thisRow.replace("<tbody>","");
thisRow = thisRow.replace("</tbody>","");
thisRow = thisRow.replace("</table>","");
thisRow = thisRow.replace("__MYFIELD0__",cell_data[0]);
thisRow = thisRow.replace("__MYFIELD1__",cell_data[1]);
thisRow = thisRow.replace("__MYFIELD2__",cell_data[2]);
thisRow = thisRow.replace("__MYFIELD3__",cell_data[3]);
thisRow = thisRow.replace("__MYFIELD4__",cell_data[4]);
table_rows += thisRow;
}
}
}
}
table_data = table_start;
table_data += table_head_start + table_head + table_head_end;
table_data += table_foot_start + table_head + table_foot_end;
table_data += table_body_start + table_rows + table_body_end;
table_data += table_end;
$('#divMyTable').html(table_data);
}
});
},
convertTableToDataTable: function() {
//alert('convertTableToDataTable fired - BEFORE!');
$('#myTable').DataTable();
//alert('convertTableToDataTable fired! - AFTER');
},
lastFunction: function() {} // all previous closing curly braces should have a comma after them
} // end of the ltm object.最佳答案
改变
$('#divMyTable').html(table_data);
到
$('#divMyTable').html(table_data).onload().DataTable();
这将确保在加载 html 时触发 DataTable。
并删除
convertTableToDataTable: function() {
//alert('convertTableToDataTable fired - BEFORE!');
$('#myTable').DataTable();
//alert('convertTableToDataTable fired! - AFTER');
},
关于javascript - 如果事先没有alert()，DataTables 不会转换 HTML 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51560806/