DataTable具有不同列数 [英] DataTables with different number of columns
问题描述
例如，南部省份和北部省份下拉列表。 南省表有4列，北省表有6列。
情景1
第一个用户选择南部省份其中有4列。然后它生成表，没有任何错误，但之后，如果用户选择北省其中有6列，表不生成和js控制台打印错误如下。
未捕获TypeError：无法读取未定义的jquery.dataTables.js的属性style：3828
情景2
第一个用户选择北省，其中有6个列。然后它生成表，没有任何错误，但之后，如果用户选择南部省份它有4列，表不生成和js控制台打印错误如下。
未捕获TypeError：无法读取未定义的jquery.dataTables.js的属性mData：6122
但是如果两个表的列数相同，两个表都会生成没有错误。
我如何解决这个问题？
以下是JS代码
jQuery（document）
.ready b $ b function（）{
$（'＃province-list'）。change（
function（）{
var prov = $（this）.val（）;
if（prov ==sp）{
make_SP（）;
} else if（prov ==np）{
make_NP（）;
}
$）
函数make_SP（）{
$（＃dataTables-res_item）
.dataTable（
{
bDestroy：true，
bProcessing：false，
bServerSide：true，
sAjaxSource：/ province_list_view？p_name = sp，
aoColumns：[
{
mData：result_date，
sTitle：结果日期
}，
{
mData：result_day，
sTitle：结果日
}，
{
mData：draw_number，
sTitle ：Draw Number
}，
{
mData：draw_time，
sTitle：绘制时间
}]，
order：[[0，desc]]
}）;
};
函数make_NP（）{
$（＃dataTables-res_item）
.dataTable（
{
bDestroy：true，
bProcessing ：false，
bServerSide：true，
sAjaxSource：/ province_list_view？p_name = np，
aoColumns：[
{
mData：result_date，
sTitle：结果日期
}，
{
mData：result_day，
sTitle 结果日
}，
{
mData：draw_number，
sTitle：绘制数
}，
{
mData：draw_time，
sTitle：绘制时间
}，
{
mData：draw_place，
sTitle：Draw Place
}，
{
mData：draw_person，
sTitle ：Agent
}]，
order：[[0，desc]]
}）;
};
}）;
我认为最安全的方法是完全删除表，然后在重新初始化之前将其重新插入到DOM中。似乎数据表不完全删除所有生成的内容，这就是为什么发生错误（由于不同的原因）。在理论上，它应该如上所述，或多或少，但它不。考虑这个解决方案：
下面演示链接的全部资料
var dataTable，
domTable，
htmlTable ='< table id =example>< tbody>< / tbody>< / table> ;
函数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 和和dataTables注入），然后重新插入< table> -skeleton重新初始化dataTable。
我不知道这是否适应OP的需要，但这是怎么做的。对于未来的更改，它将更加灵活，并且可以从脚本自动生成 aoColumns --objects，或者通过AJAX从服务器实现（如果要为不同语言使用不同的标题， 例如）。 皮带和大括号：）
I am loading data using ajax and generating column names dynamically in my DataTable. My DataTable has different number of columns, depending on the selection by user.(There is a drop-down list).
For example, there are 2 options in drop-down list as Southern Province and Northern Province. Southern Province table has 4 columns and Northern Province table has 6 columns.
Scenario 1
First user select Southern Province which has 4 columns. Then it generates table without no errors, But after that if user select Northern Province which has 6 columns, table not generate and js console print error as below.
Uncaught TypeError: Cannot read property 'style' of undefined jquery.dataTables.js:3828
Scenario 2
First user select Northern Province which has 6 columns. Then it generates table without no errors, But after that if user select Southern Province which has 4 columns, table not generate and js console print error as below.
Uncaught TypeError: Cannot read property 'mData' of undefined jquery.dataTables.js:6122
But if both table has same number of columns, both tables generate without errors.
How can I solve this ?
Here is the JS Code
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" ] ]
});
};
});
I think the safest way is to remove the table completely, and then re-insert it to the DOM before reinitialising. Seems to me that dataTables not completely removes all generated content, thats why the error(s) occurs (for different reasons). In theory it should work as above, more or less, but it doesn't. Consider this solution :
[full source in the demo link below]
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);
});
This works. See demo -> http://jsfiddle.net/gss4a17t/
Basically it is the same as in OP, but instead of having different functions for different provinces, I have made different aoColumns for different provinces and so on. And instead of relying on bDestroy, I remove the entire <table> with dataTable.fnDestroy(true) (both DOM and and dataTables injections) and then reinserts the <table>-skeleton before reinitialising the dataTable.
I dont know if that is adaptable to OP's need, but this is how I would do it. It is more flexible for future changes, and the aoColumns-objects can be autogenerated from a script or achieved from the server by AJAX (if you want to have different titles for different languages, for example). "Belt and braces" :)
这篇关于DataTable具有不同列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
