简洁明了话不多说 直接看代码
html部分如下
<body>
<table id="example" class="display table table-bordered" cellspacing="0" style="width: 100%;">
</table>
</body>
<style type="text/css">
table>thead>tr>th {
border: 1px solid #999999;
}
table>tbody>tr>td {
border: 1px solid #999999;
}
</style>
js部分
<script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript">
//动态表头
var dutyPty = [{
data: "dutyPersonType1",
title: "领导"
},
{
data: "dutyPersonType2",
title: "技术员"
},
{
data: "dutyPersonType3",
title: "司机"
}
];
//固定表头
var datablesHeader = [{
data: 'date',
title: "日期"
},
{
data: 'depart',
title: "单位"
},
{
data: 'dutyTypeName',
title: "班次"
}
]
//两个表头合并
var heraderArry = datablesHeader.concat(dutyPty)
var datesArrys=[]
//原始数据
var dates1 = {
"2018-04-16": [
{
"tenantid": "2018-04-16_9",
"date": "2018-04-16",
"weekOfYear": 16,
"dayOfWeek": 1,
"month": 3,
"groupId": 9,
"groupName": "江夏1",
"tm": [{
"date": "2018-04-16",
"dutyType": "1",
"dutyBgtm": "2018-04-16 08:00:00",
"dutyEdtm": "2018-04-16 18:30:00",
"dutyTypeName": "白班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
},
{
"date": "2018-04-16",
"dutyType": "2",
"dutyBgtm": "2018-04-16 18:30:00",
"dutyEdtm": "2018-04-17 08:00:00",
"dutyTypeName": "夜班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
}
]
},
{
"tenantid": "2018-04-16_9",
"date": "2018-04-16",
"weekOfYear": 16,
"dayOfWeek": 1,
"month": 3,
"groupId": 9,
"groupName": "江夏2",
"tm": [{
"date": "2018-04-16",
"dutyType": "1",
"dutyBgtm": "2018-04-16 08:00:00",
"dutyEdtm": "2018-04-16 18:30:00",
"dutyTypeName": "白班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
},
{
"date": "2018-04-16",
"dutyType": "2",
"dutyBgtm": "2018-04-16 18:30:00",
"dutyEdtm": "2018-04-17 08:00:00",
"dutyTypeName": "夜班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
}
]
},
{
"tenantid": "2018-04-16_9",
"date": "2018-04-16",
"weekOfYear": 16,
"dayOfWeek": 1,
"month": 3,
"groupId": 9,
"groupName": "江夏3",
"tm": [{
"date": "2018-04-16",
"dutyType": "1",
"dutyBgtm": "2018-04-16 08:00:00",
"dutyEdtm": "2018-04-16 18:30:00",
"dutyTypeName": "白班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
},
{
"date": "2018-04-16",
"dutyType": "2",
"dutyBgtm": "2018-04-16 18:30:00",
"dutyEdtm": "2018-04-17 08:00:00",
"dutyTypeName": "夜班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
}
]
},
],
"2018-04-17": [
{
"tenantid": "2018-04-16_9",
"date": "2018-04-17",
"weekOfYear": 16,
"dayOfWeek": 1,
"month": 3,
"groupId": 9,
"groupName": "江夏1",
"tm": [{
"date": "2018-04-17",
"dutyType": "1",
"dutyBgtm": "2018-04-17 08:00:00",
"dutyEdtm": "2018-04-17 18:30:00",
"dutyTypeName": "白班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
},
{
"date": "2018-04-17",
"dutyType": "2",
"dutyBgtm": "2018-04-17 18:30:00",
"dutyEdtm": "2018-04-17 08:00:00",
"dutyTypeName": "夜班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
}
]
},
{
"tenantid": "2018-04-16_9",
"date": "2018-04-17",
"weekOfYear": 16,
"dayOfWeek": 1,
"month": 3,
"groupId": 9,
"groupName": "江夏2",
"tm": [{
"date": "2018-04-17",
"dutyType": "1",
"dutyBgtm": "2018-04-17 08:00:00",
"dutyEdtm": "2018-04-17 18:30:00",
"dutyTypeName": "白班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
},
{
"date": "2018-04-17",
"dutyType": "2",
"dutyBgtm": "2018-04-17 18:30:00",
"dutyEdtm": "2018-04-17 08:00:00",
"dutyTypeName": "夜班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
}
]
},
{
"tenantid": "2018-04-16_9",
"date": "2018-04-17",
"weekOfYear": 16,
"dayOfWeek": 1,
"month": 3,
"groupId": 9,
"groupName": "江夏3",
"tm": [{
"date": "2018-04-17",
"dutyType": "1",
"dutyBgtm": "2018-04-17 08:00:00",
"dutyEdtm": "2018-04-17 18:30:00",
"dutyTypeName": "白班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
},
{
"date": "2018-04-17",
"dutyType": "2",
"dutyBgtm": "2018-04-17 18:30:00",
"dutyEdtm": "2018-04-17 08:00:00",
"dutyTypeName": "夜班",
"dutyPersonType1": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "史则义",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
}
]
},
],
"2018-04-18": [
{
"tenantid": "2018-04-18_9",
"date": "2018-04-18",
"weekOfYear": 16,
"dayOfWeek": 1,
"month": 3,
"groupId": 9,
"groupName": "泸州",
"tm": [{
"date": "2018-04-18",
"dutyType": "1",
"dutyBgtm": "2018-04-17 08:00:00",
"dutyEdtm": "2018-04-17 18:30:00",
"dutyTypeName": "白班",
"dutyPersonType1": [{
"id": "3802",
"realName": "123213",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "3423423",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "EET",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
},
{
"date": "2018-04-18",
"dutyType": "2",
"dutyBgtm": "2018-04-17 18:30:00",
"dutyEdtm": "2018-04-17 08:00:00",
"dutyTypeName": "夜班",
"dutyPersonType1": [{
"id": "3802",
"realName": "大范甘迪",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "1"
}],
"dutyPersonType2": [{
"id": "3802",
"realName": "成功的个人",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "2"
}],
"dutyPersonType3": [{
"id": "3802",
"realName": "梵蒂冈梵蒂冈",
"userName": "shizeyi",
"userTel": "13985217301",
"groupId": 9,
"groupName": "江夏中心站",
"userDepart": "赤水中心站负责人",
"dutyPersonTypeName": "值班领导",
"dutyPersonType": "3"
}]
}
]
}
],
}
//获取人员名称
var getName = function(arr){
var result = '';
$.each(arr,function(i,item){
result += item.realName + ','+item.userTel;
});
return result ? result.substr(0,result.length-1):result;
}
//拼接table数据
$.each(dates1, function(a, item) {
$.each(item, function(b, dates) {
var length=dates.tm.length*item.length
$.each(dates.tm, function(c, typename) {
var aa = {};
$.each(dutyPty,function(i,item){
aa[item.data] = getName(typename[item.data]);
});
aa.date=dates.date;
aa.depart=dates.groupName;
aa.dutyTypeName=typename.dutyTypeName;
datesArrys.push(aa)
});
})
})
var arr = {};
var arr1 = {};
var datables=[]
//以日期为标识创建集合并计算需要合并的长度
$.each(datesArrys, function (i, v) {
var key = v.date;
if (!arr[key]) {
arr[key] = [];
arr[key].push(v);
}
else{
arr[key].push(v);
}
});
//向对应的行数里面添加合并长度
for(var key in arr){
arr[key][0].num=arr[key].length
}
//以日期和单位为标识创建集合并计算需要合并的长度
$.each(datesArrys, function (i, v) {
var key =v.date +"_"+ v.depart;
if (!arr1[key]) {
arr1[key] = [];
arr1[key].push(v);
}
else{
arr1[key].push(v);
}
});
//向对应的行数里面添加合并长度并连接数组
for(var key in arr1){
arr1[key][0].num1=arr1[key].length
datables=datables.concat(arr1[key])
}
$('#example').DataTable({
data: datables,
paging: false,
searching: false, //搜索栏
lengthChange: false, //是否允许改变每页显示的数据条数
ordering: false,
info:false,
columns: heraderArry,
columnDefs: [{
targets: 0,
createdCell: function(td, cellData, rowData, row, col) {
//第0列需要合并的行数然后移除未设置num的行
var rowspan = rowData.num; //拿到第一列需要合并的数据
if(rowspan == rowData.num) {
$(td).attr('rowspan', rowspan)
}
if(rowspan == undefined) {
$(td).remove();
}
}
},
{
targets: 1,
createdCell: function(td, cellData, rowData, row, col) {
//第1列需要合并的行数然后移除未设置num1的行
var rowspan1 =rowData.num1; //拿到第二列需要合并的数据
if(rowspan1 == rowData.num1) {
$(td).attr('rowspan', rowspan1)
}
if(rowspan1 == undefined) {
$(td).remove();
}
}
}
]
});
</script>
代码拷贝下来就可以直接执行 效果图如下
以上就是js全部代码 都有详细注释
在此特别感谢博客大佬追极提供的思路 :
追极 https://www.cnblogs.com/hdwang/p/7169255.html?utm_source=itdadao&utm_medium=referral