javascript - 如果事先没有alert()，DataTables 不会转换 HTML 表

Question

我正在构建一个页面，该页面进行 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.

Answer 1

改变

$('#divMyTable').html(table_data);

到

$('#divMyTable').html(table_data).onload().DataTable();

这将确保在加载 html 时触发 DataTable。

并删除

convertTableToDataTable: function() {
        //alert('convertTableToDataTable fired - BEFORE!');
        $('#myTable').DataTable();
        //alert('convertTableToDataTable fired! - AFTER');
    },