我正在使用ajax加载数据并在DataTable中动态生成列名。我的数据表具有不同的列数，具体取决于用户的选择。（有一个下拉列表）。
例如，下拉列表中有2个选项，即“南部省”和“北部省”。南部省表有4列，北部省表有6列。
场景1
第一个用户选择具有4列的Southern Province。然后它生成的表没有错误，但是在此之后，如果用户选择具有6列的Northern Province，则表不会生成，并且js控制台打印错误，如下所示。
Uncaught TypeError: Cannot read property 'style' of undefined jquery.dataTables.js:3828
方案2
第一个用户选择具有6列的Northern Province。然后它生成的表没有错误，但是在此之后，如果用户选择有4列的Southern Province，则表不会生成，并且js控制台打印错误，如下所示。
Uncaught TypeError: Cannot read property 'mData' of undefined jquery.dataTables.js:6122
但是，如果两个表具有相同的列数，则两个表都会生成而不会出错。
我该如何解决？
这是JS代码
jQuery(document)
.ready(
function() {
$('#province-list').change(
function() {
var prov = $(this).val();
if (prov == "sp") {
make_SP();
} else if (prov == "np") {
make_NP();
}
});
function make_SP() {
$("#dataTables-res_item")
.dataTable(
{
"bDestroy" : true,
"bProcessing" : false,
"bServerSide" : true,
"sAjaxSource" : "/province_list_view?p_name=sp",
"aoColumns" : [
{
"mData" : "result_date",
"sTitle" : "Result Date"
},
{
"mData" : "result_day",
"sTitle" : "Result Day"
},
{
"mData" : "draw_number",
"sTitle" : "Draw Number"
},
{
"mData" : "draw_time",
"sTitle" : "Draw Time"
} ],
"order" : [ [ 0, "desc" ] ]
});
};
function make_NP() {
$("#dataTables-res_item")
.dataTable(
{
"bDestroy" : true,
"bProcessing" : false,
"bServerSide" : true,
"sAjaxSource" : "/province_list_view?p_name=np",
"aoColumns" : [
{
"mData" : "result_date",
"sTitle" : "Result Date"
},
{
"mData" : "result_day",
"sTitle" : "Result Day"
},
{
"mData" : "draw_number",
"sTitle" : "Draw Number"
},
{
"mData" : "draw_time",
"sTitle" : "Draw Time"
},
{
"mData" : "draw_place",
"sTitle" : "Draw Place"
},
{
"mData" : "draw_person",
"sTitle" : "Agent"
} ],
"order" : [ [ 0, "desc" ] ]
});
};
});
我认为最安全的方法是完全删除表，然后在重新初始化之前将其重新插入DOM。在我看来，dataTables不能完全删除所有生成的内容，这就是为什么会发生错误（由于不同的原因）。从理论上讲，它应该或多或少地如上所述工作，但事实并非如此。考虑以下解决方案：
[下面的演示链接中的完整源代码]
var dataTable,
domTable,
htmlTable = '<table id="example"><tbody></tbody></table>';
function initDataTable(province) {
if ($.fn.DataTable.fnIsDataTable(domTable)) {
dataTable.fnDestroy(true);
$('body').append(htmlTable);
}
var data = (province=='sp') ? sp : np;
var columns = (province=='sp') ? spColumns : npColumns;
dataTable = $("#example").dataTable({
aaData : data,
aoColumns : columns
/* other options here */
});
domTable = document.getElementById('example');
}
$('#province-list').change(function() {
var prov = $(this).val();
initDataTable(prov);
});
这有效。参见demo-> http://jsfiddle.net/gss4a17t/基本上与OP中的相同，但是我对不同的省使用不同的功能，而不是对不同的省使用不同的功能aoColumns。而不是依靠bDestroy，我删除整个<table>用dataTable.fnDestroy(true)（DOM都和和数据表注射），然后重新插入<table>重新初始化数据表之前-skeleton。
我不知道这是否适合OP的需要，但这就是我会做的方式。它对于将来的更改更加灵活，并且aoColumns-objects可以从脚本自动生成，也可以通过AJAX从服务器实现（例如，如果您想为不同的语言使用不同的标题）。“皮带和括号” :)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句