datatables 动态表格行合并

简洁明了话不多说直接看代码
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].lengthdatables=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

datatables 动态表格行合并相关推荐

layui table 表头合并_layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
html table 表格行合并列合并
目录 1.表格边框合并 2.行合并 3.列合并表格:table 行:tr 列:td 属性: border:边框 width:宽 height:高 bordercolor:变宽颜色 cellspaci ...
layui表格行合并
先看一下最终合并之后的效果,能对单选.复选框进行按照某一列的合并. 最开始的解决方案来自于这篇博客介绍的方法:https://blog.csdn.net/guishifoxin/article/det ...
Latex 表格行合并，列合并，控制行间距单元格宽度
多行合并的时候,需要加入新的usepackage, 不然会报错 \usepackage{multirow} 1.多行合并 \linespread{1.3} %控制行间距 \begin{table*}[ ...
Datatables实现表格行内编辑功能
表格行内编辑功能通过操作DOM来实现,最终实现效果如下代代码 html <table class="table table-striped table-bordered table-h ...
jquery获取动态表格行号_jquery datatables双击，获取行号。
function dbClickDatatables(rows) { $("#@(Perfix)tbData tbody tr").dblclick(function(e){ de ...
layui表格合并单元格多表_layui动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格done : function(res, curr, count) { ...
element-ui table表格行合并、标红及数据转换
先看下效果看下后端返回的数据格式,首先分析下数据结构,maxstatis,minstatis,avgstatis,passtatis是上图表格的四行数据,titles是表 ...
jquery获取动态表格行号_jquery得到表格当前行数据
jquery 得到表格当前行数据首先在页面引入 jquery.js 库文件取表格当前行数据 js 代码: $(function() { $(".myclass").each(f ...
layui根据name获取对象_layui表格行合并；解决侧边固定栏合并
实现效果图: 适配分页:全选: 后台嵌套数据: 获取数据后:渲染前操作: ,done:function(res){if(res.data){for(var i = 0;i<res.data.le ...

datatables 动态表格行合并

datatables 动态表格行合并相关推荐

最新文章

热门文章