jQuery dataTable行合并
发布日期:2022-03-04 12:48:39 浏览次数:29 分类:技术文章

本文共 2416 字,大约阅读时间需要 8 分钟。

function init() {
let rowCountIndex, sameNumList,rowCount example = $('#dt-table').DataTable({
... "ajax": {
"url": "XXX", "type": "get", "data": function (d) {
... }, dataSrc: res => {
let data = res.data; // 聚合数据 *************************************************************{a:[{},{}], b:[{}]} let map = {
}; for (let i=0, len=data.length; i < len; i++) {
if (!map[data[i].pointName]) map[data[i].pointName] = [] map[data[i].pointName].push(data[i]) } let values = Object.values(map) data = values.flat() // 数组扁平化 rowCountIndex = 0 sameNumList = [] // 要合并的相同列数集合 *********************************************************[2, 2, 3] for (let i=0, len=data.length; i < len; i++) {
if (i === len - 1) {
sameNumList[rowCountIndex] ? sameNumList[rowCountIndex]++ : sameNumList[rowCountIndex] = 1; break; } if (data[i].pointName === data[i+1].pointName) {
sameNumList[rowCountIndex] ? sameNumList[rowCountIndex]++ : sameNumList[rowCountIndex] = 1; } else {
sameNumList[rowCountIndex] ? sameNumList[rowCountIndex]++ : sameNumList[rowCountIndex] = 1; rowCountIndex++; } } // 初始化需要的下标 ************************************ rowCountIndex = 0; rowCount = 0; return data }, "error": function (xhr, textStatus, errorThrown) {
var msg = xhr.responseText; console.log(msg) } }, "columns": [ ... ], "columnDefs": [ {
"targets": [0], // 要合并的行所在的列 "createdCell": function(cell, cellData, rowData, rowIndex, colIndex) {
// 首行合并 rowCount === 0 ? $(cell).attr("rowspan", sameNumList[rowCountIndex]) : $(cell).remove(); rowCount++; // 跨行处理 if (rowCount === sameNumList[rowCountIndex]) {
rowCountIndex++; rowCount = 0; } } } ] });

转载地址:https://blog.csdn.net/qq_44308920/article/details/120438697 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:在微信小程序云函数中用node.js中的mysql2/promise连接阿里云服务器上的mysql
下一篇:bootstrapValidator重置验证

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年03月23日 20时40分33秒