问题描述
[![more image is already used row groping by DEPARTMENT][1]][1][![image][2]][2]
在我附加的图像中，我使用数据表（ajax 调用）显示数据。有些行具有完全相同的类 ID、类#、部分和标题。 如果有相同的数据，如何只在一行中显示重复数据？ 谢谢！ 以下是ajax使用数据表的代码
' var groupColumn = 0;
var classListTable = $("#classListTable").DataTable({
//"columnDefs": [
// { "visible": false,"targets": groupColumn }
//],paging: true,fixedHeader: {
header: true,headerOffset: -7
},"order": [[groupColumn,'asc'],[5,[4,'asc']],//below is for group by department
"drawCallback": function (settings) {
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(groupColumn,{ page: 'current' }).data().each(function (group,i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group maroon text-center font-weight-bold lead"><td colspan="100">' + group + '</td></tr>'
);
last = group;
}
});
},ajax: {
url: '@Url.Content("~/api/LEGACY_CLASSLIST_CURRENT/GetLEGACY_CLASSLIST_CURRENT")?yt='+@currentYt,dataSrc: "","deferRender": true
},"bDestroy": true,// be able to load new data for the table
"lengthMenu": [[-1,25,50,100],["ALL",100 ]],columns: [
{ data: "DEPARTMENT",visible: false },{ data: "YRTR_DESC",visible: false},{data: "COU_ID"},{
data: "CLASS_NBR",render: function (data,type,row) {
return '<a href="' + row.LEGACY_URL + '" target="_blank">' + data + '</a>';
}},{ data: "SECTION" },{ data: "TITLE" },{ data: "CREDITS" },{ data: "ENROLLED" },{ data: "MAX_SIZE" },{ data: "MEETING_DATES",className: "text-Nowrap" },{ data: "DAYS" },{ data: "TIME" },{ data: "BLDG_CODE" },{ data: "ROOM_NBR" },{ data: "CAmpuS",visible: true },{ data: "INSTRUCTOR" },{
data: "SPL_MSG_AGGR",row) {
if (data != null) {
return '<button tabindex="0" class="btn btn-sm btn-secondary js-message text-success" data-toggle="popover" data-message="' + data + '">View</button>';
}
else { return "<span class=''><span>"; }
}
},{ data: "LEGACY_URL",visible:false }
],initComplete: function () {
//test
//this.api().columns([5]).every(function () {
// var column = this;
// column.data().each(function (d,j) {
// });
//});
//test
// filter for DEPARTMENT
this.api().columns([0]).every(function () {
// var column = this.api().column(1);
var column = this;
var select = $('<select class="form-control"><option value="">All</option></select>')
.appendTo($('#DEPARTMENT').empty())
.on('change',function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '',true,false)
.draw();
});
column.data().unique().sort().each(function (d,j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});
// filter for CAmpuS
this.api().columns([14]).every(function () {
var column = this;
var select = $('<select class="form-control"><option value="">All</option></select>')
.appendTo($('#CAmpuS').empty())
.on('change',function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '',false)
.draw();
});
column.data().unique().sort().each(function (d,j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});
//ending for CAmpuS
}
//ending api filter
});
//ending classListTable call
我已经对一列使用了一次行分组，但不确定它是否可以对多列进行分组 [1]：https://i.stack.imgur.com/3ouUE.png [2]：https://i.stack.imgur.com/ZelNb.png
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）