datatables 动态表格行合并

最新推荐文章于 2024-06-06 16:19:15 发布
最新推荐文章于 2024-06-06 16:19:15 发布
阅读量6.1k 收藏 5
点赞数
分类专栏： datatables 文章标签： datatables
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40043172/article/details/80208469
版权

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

一只很想飞的猪
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
合并datatable
nihaoma71121的专栏
11-16 1029
c# 对两个Datatable的结构相同进行合并:            Datatable db=null;         DataTable dt = ds.Tables[0];         ////两个datatable进行合并          db = dt.Copy();         DataRow[] foundRows = dt.Select();
datatables合计行
禾黍离离的博客
10-15 1254
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="style...
dataTables动态合并行
05-19
jquery.datatables，异步请求后台数据时，调用api动态合并行。
datatables合并行（带分页、筛选）
木槿昔年
09-10 2917
由于项目的需要，datatables表格需要对一些相同的数据单元进行行合并，但是网上搜索了半天，能实现行的合并，但是在经过数据筛选或者分页后又会还原。在此记录下自己的解决办法，希望能帮到需要的人。。。 1、合并原理 在datatables中，对于行的合并好像并没有给出具体的api，这里行的合并都是通过rowspan来实现，所以要合并多少行，这里需奥数据来标明。所以我做sql查询的时候，把数据进...
Jquery.dataTables数据表格设置复合表头
最新发布
QINGZHID的博客
06-06 327
使用dataTables数据表格的复杂表头报错
DataTable合并行
半城繁華半城傷的博客
07-17 568
table= $('#table').DataTable( { destroy: true, serverSide: true, responsive: true, deferRender: false,//设置延迟渲染，提高效率用 draw:false, searching : false, bLengthChange: false, order: [[ 0, 'asc' ],[ 1, 'asc' ]],...
DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)
bingguang1993的博客
09-26 2605
直接上代码，原理之前的随笔已经讲过了。http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果     2.html代码，含js代码 2.1 common.js /** * Created by hdwang on 2017/6/23. */ var language = { "search": "", "sSearch" ...
jquery 合并table表格行或列
jiangjunyuan168的博客
01-09 735
【代码】jquery 合并table表格行或列。
dataTable中合并行
itheima1994的博客
03-24 785
需求：由于数据库查询时有字段要求，不能将某些重复值的行合并，前端显示要求合并（合并两个字段值不一致，其他字段值一致的行，将不一致的两个字段累加） DataTable dataTable2 = dataTable.Clone(); //复制一个已经查询出的dataTable的结构（说白了就是复制它的字段） for (int i=0;i<dataTable.Rows.C...
jQuery Datatables 动态列+跨列合并实现代码
10-15
在本教程中，我们将探讨如何在jQuery DataTables中实现动态列和跨列合并。 动态列是指表格列的数量可以根据数据或者用户需求进行动态调整。在给出的代码示例中，动态列的实现主要依赖于`thead_key`和`thead_num`两...
jquery datatable 单元格合并
04-26
本篇将详细介绍如何使用jQuery DataTables结合JavaScript来实现相同内容单元格的动态合并。 首先，我们需要理解jQuery DataTables的基本用法。它基于jQuery库，可以通过简单的配置和API来创建高度交互的表格。要...
DataTable合并重复行(解决方案)
06-11
DataTable合并重复行(解决方案)
可写的动态表格
12-06
1. **实时更新**：动态表格能够即时反映用户对表格的操作，如插入一行、删除一列或者修改单元格内容，这些改变会立即在界面上呈现出来。 2. **交互性**：用户可以通过点击、拖动、输入文字等方式与表格互动，增强了...
jQuery合并单元格
09-02
这时可能需要对表格进行更复杂的操作，甚至可能需要借助额外的库，如DataTables或Handsontable，它们提供了更丰富的表格功能和API。 总之，jQuery合并单元格是通过分析表格数据和应用DOM操作实现的，这要求开发者对...
DataTable 合并行或列
热门推荐
jiang0609的专栏
05-23 1万+
#region 合并单元格 合并某一行的所有列　　///　 　　　///　 合并GridView中某行相同信息的行（单元格）　　///　 　　　///　 GridView对象　　　///　 需要合并的行　　public static void GroupRow(GridView GridView1, int rows)　　{　　TableCell oldTc = G
使用DataTables合并行
weixin_34168700的博客
01-02 479
效果如下: 首先需要对数据进行分组查询，使用COUNT(*) OVER(PARTITION BY column名称) as columnCount 获取每组的数据条数 columnCount；使用ROW_NUMBER() OVER(partition by column名称 ORDER BY column名称 DESC) as columnNum 为每组的数据生成排序ID columnNum； ...
datatables表格数据最后一行当作固定行
06-13
如果您希望在 DataTables 表格中将最后一行数据固定在表格底部，可以将这一行数据提取出来并将其放到表格底部。您可以使用以下代码实现这一功能： ```javascript // 获取表格数据 var tableData = $('#example')....
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值