我无法正确显示数据表中的内容。基本功能运行良好，但是单击按钮（按钮扩展名）时会发生问题，数据表行组移至右侧，而不是隐藏按钮配置中指定的列。好像单击按钮会重新计算colspan，从而使所有单元格向右移动。
这是我到目前为止所做的（jsfiddle）https://jsfiddle.net/jbdn90h6/
$(document).ready(function() {
let tableObj: any = $('#myDataTable');
let collapsedGroups: any = {};
let numFormat: any = $.fn.dataTable.render.number('\,', '.', 0, '').display;
let decimalFormat: any = $.fn.dataTable.render.number('\,', '.', 2, '').display;
let dataTableObj: any = tableObj.DataTable({
destroy: true,
data: readingTableData,
language: {
'emptyTable': 'No data available for search criteria.'
},
dom: 'Bt',
buttons: [{
extend: 'colvisGroup',
text: 'View All',
show: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34],
hide: [0]
},
{
extend: 'colvisGroup',
text: 'Initial',
show: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
hide: [0, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34]
},
{
extend: 'colvisGroup',
text: 'Highest',
show: [1, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29],
hide: [0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 30, 31, 32, 33, 34]
},
{
extend: 'colvisGroup',
text: 'Average',
show: [1, 30, 31],
hide: [0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 32, 33, 34]
},
{
extend: 'colvisGroup',
text: 'Gain',
show: [1, 32],
hide: [0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 33, 34]
},
{
extend: 'colvisGroup',
text: 'Quick Gain',
show: [1, 33, 34],
hide: [0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32]
}
],
autoWidth: false,
fixedHeader: true,
orderFixed: [0, 'asc'],
order: [1, 'asc'],
displayLength: -1,
columns: [{
data: 'RName'
},
{
data: 'CName'
},
{
data: 'init_0'
}, {
data: 'init_1'
},
{
data: 'init_2'
}, {
data: 'init_3'
},
{
data: 'init_4'
}, {
data: 'init_5'
},
{
data: 'init_6'
}, {
data: 'init_7'
},
{
data: 'init_8'
}, {
data: 'init_9'
},
{
data: 'init_10'
}, {
data: 'init_11'
},
{
data: 'init_12'
}, {
data: 'init_unknown'
},
{
data: 'high_0'
}, {
data: 'high_1'
},
{
data: 'high_2'
}, {
data: 'high_3'
},
{
data: 'high_4'
}, {
data: 'high_5'
},
{
data: 'high_6'
}, {
data: 'high_7'
},
{
data: 'high_8'
}, {
data: 'high_9'
},
{
data: 'high_10'
}, {
data: 'high_11'
},
{
data: 'high_12'
}, {
data: 'high_unknown'
},
{
data: 'init_avg_score'
}, {
data: 'high_avg_score'
},
{
data: 'one_grade_lvl'
},
{
data: 'quick_gain_90_days'
}, {
data: 'quick_gain_list'
}
],
columnDefs: [{
'targets': [0],
'visible': false
}],
rowGroup: {
dataSrc: 'RName',
startRender: function(rows: any, group: any) {
let collapsed: any = !!collapsedGroups[group];
rows.nodes().each(function(r: any) {
r.style.display = collapsed ? '' : 'none';
});
let initAvgScore = rows
.data()
.pluck("init_avg_score")
.reduce(function(a: number, b: number) {
return Number(a) + Number(b);
}, 0) / rows.count();
let highAvgScore = rows
.data()
.pluck("high_avg_score")
.reduce(function(a: number, b: number) {
return Number(a) + Number(b);
}, 0) / rows.count();
return $('<tr/>')
.append('<td>' + group + ' (' + rows.count() + ')</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_0);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_1);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_2);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_3);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_4);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_5);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_6);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_7);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_8);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_9);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_10);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_11);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_12);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.init_unknown);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_0);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_1);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_2);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_3);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_4);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_5);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_6);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_7);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_8);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_9);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_10);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_11);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_12);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.high_unknown);
}, 0)) + '</td>')
.append('<td class="number">' + decimalFormat(initAvgScore) + '</td>')
.append('<td class="number">' + decimalFormat(highAvgScore) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.one_grade_lvl);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.quick_gain_90_days);
}, 0)) + '</td>')
.append('<td class="number">' + numFormat(rows.data().reduce(function(a: any, b: any) {
return Number(a) + Number(b.quick_gain_list);
}, 0)) + '</td>')
.attr('data-name', group)
.toggleClass('expanded', collapsed);
}
},
footerCallback: function(row: any, data: Array < any > , start: any, end: any, display: any) {
let api: any = this.api();
//let groupCount: number = [...new Set(data.map((item: any) => item.RName))].length;
for (var i = 2; i < 35; i++) {
if (i == 30 || i == 31) {
let avgScore = api
.column(i)
.data()
.reduce(function(a: number, b: number) {
return Number(a) + Number(b);
}, 0) / data.length;
$(api.column(i).footer()).html(
decimalFormat(avgScore)
);
} else {
$(api.column(i).footer()).html(
numFormat(api.column(i).data().reduce(function(a: number, b: number) {
return Number(a) + Number(b);
}, 0))
);
}
}
}
});
tableObj.on('click', 'tbody tr.dtrg-group', function() {
let name: string = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
dataTableObj.draw(false);
});
我们非常感谢您的帮助。谢谢