使用DataTables合并行

1,937 阅读1分钟

效果如下:

首先需要对数据进行分组查询,使用COUNT(*) OVER(PARTITION BY column名称) as columnCount 获取每组的数据条数 columnCount;使用ROW_NUMBER() OVER(partition by column名称 ORDER BY column名称 DESC) as columnNum 为每组的数据生成排序ID columnNum;

使用createdCell函数进行单元格合并,具体参考:www.datatables.club/reference/o…

"columnDefs":[{
    "targets": 0,
    "orderable" : false,
    "data":null,
    "createdCell": function(td, cellData, rowData, row, col) {
        if(rowData.columnNum > 1){
        	$(td).remove();
        }
        if(rowData.columnNum == 1){
        	$(td).attr("rowspan", rowData.columnCount);
        }
    }
}]

rowData为每一行的数据内容,判断当前行在分组内的columnNum,等于1的添加属性rowspan,并设置其值为columnCount;大于1的将td单元格删除。 PS:在使用createdCell函数时总是报错如下:

经过各种查找,在添加"data":null之后问题解决,具体原因参考: datatables.net/forums/disc…

Add: data: null to your first column to tell DataTables not to try and source the data from anywhere. Otherwise it will use the column index (0 in this case).

在第一列中添加:data:null,告诉数据表不要尝试从任何地方获取数据。否则,它将使用列索引(在本例中为0)。