我正在使用 ajax 加载数据并在我的 DataTable 中动态生成列名。我的 DataTable 有不同的列数,具体取决于用户的选择。(有一个下拉列表)。
例如,下拉列表中有Southern Province和Northern Province两个选项。 Southern Province 表有 4 列,Northern Province 表有 6 列。
场景一
第一个用户选择 Southern Province,它有 4 列。然后它生成表没有错误,但是之后如果用户选择具有 6 列的 Northern Province,则不会生成表并且 js 控制台打印错误如下。
未捕获的类型错误:无法读取未定义的 jquery.dataTables.js:3828 的属性“样式”
场景二
第一个用户选择 Northern Province,它有 6 列。然后它生成表没有错误,但是之后如果用户选择具有4列的Southern Province,则不会生成表并且js控制台打印错误如下。
未捕获的类型错误:无法读取未定义的 jquery.dataTables.js:6122 的属性“mData”
但如果两个表的列数相同,则两个表都不会出错。
我该如何解决这个问题?
这是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" ] ]
});
};
});
最佳答案
当更新后的数据与之前的数据列数不同时,我遇到了同样的问题。配方非常简单!在列数发生变化的情况下,Destroy 函数
与$ 结合使用("#datatable").empty();
。因此,在重新加载数据之前,您的代码将包含以下几行:
if (dataTableObject) { // Check if DataTable has been previously created and therefore needs to be flushed
dataTableObject.fnDestroy(); // destroy the dataTableObject
// For new version use table.destroy();
$('#' + DataTableDivID).empty(); // Empty the DOM element which contained DataTable
// The line above is needed if number of columns change in the Data
}
// DataTable data loading/reloading codes comes here
总的来说,您的代码可能如下所示:
if(dataTableObject) { // Check if table object exists and needs to be flushed
dataTableObject.fnDestroy(); // For new version use table.destroy();
$('#myTable').empty(); // empty in case the columns change
}
var data = (province=='sp') ? sp : np;
var columns = (province=='sp') ? spColumns : npColumns;
dataTableObject = $('#myTable').DataTable({
columns: columns,
data: data
});
关于javascript - 具有不同列数的数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26480434/