具有不同列数的数据表 [英] DataTables with different number of columns
问题描述
我正在使用 ajax 加载数据并在我的 DataTable 中动态生成列名.我的数据表有不同的列数，具体取决于用户的选择.(有一个下拉列表).
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).
例如，下拉列表中有两个选项，分别是南部省份和北部省份.Southern Province 表有 4 列，Northern Province 表有 6 列.
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.
场景一
第一个用户选择 Southern Province，其中有 4 列.然后它生成没有错误的表，但之后如果用户选择具有 6 列的 Northern Province，表不生成并且 js 控制台打印错误如下.
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.
未捕获的类型错误:无法读取未定义的 jquery.dataTables.js:3828 的属性样式"
场景 2
第一个用户选择北部省，其中有 6 列.然后它生成没有错误的表，但是之后如果用户选择具有4列的Southern Province，表不生成并且js控制台打印错误如下.
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.
未捕获的类型错误:无法读取未定义的 jquery.dataTables.js:6122 的属性 'mData'
但是如果两个表的列数相同，则两个表都会生成而不会出错.
But if both table has same number of columns, both tables generate without errors.
我该如何解决这个问题?
How can I solve this ?
这是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 没有完全删除所有生成的内容，这就是发生错误的原因(出于不同的原因).从理论上讲，它或多或少应该像上面一样工作，但事实并非如此.考虑这个解决方案:
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);
});
这有效.看演示 -> http://jsfiddle.net/gss4a17t/基本上和OP中的一样，但是我没有针对不同的省份有不同的功能，而是针对不同的省份做了不同的 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 我不知道这是否适合 OP 的需要，但我会这样做.它对于未来的更改更加灵活，并且 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 这篇关于具有不同列数的数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！aoColumns等等.而不是依赖 bDestroy，我使用 dataTable.fnDestroy(true)(DOM 和 和 dataTables 注入)，然后在重新初始化 dataTable 之前重新插入 框架.
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.aoColumns 对象可以从脚本自动生成或通过 AJAX 从服务器实现(例如，如果您想为不同的语言提供不同的标题).腰带和牙套":)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" :)
登录
关闭
