效果图
datatables官网
近期在尝试做一个添加数据库字段备注的功能,图1如下:
可以看到库名和表名存在冗余数据,我们想要的结果应该是下面这样的图2:
步骤
初略浏览了DataTables的手册,发现手册上只描述了怎么合并表头,没有具体合并内容的教程,但是在手册的Event事件中,有一个createdRow的方法,这个方法可以获取到创建的tr内容,于是想到试试用 rowspan 这个属性来合并列(合并行同理)
在构造函数中添加createdRow的方法:
$(“#Demo”).dataTable({
"createdRow": function( row, data, dataIndex ) {
console.log("Create Row...")
console.log(row)
console.log(data)
console.log(dataIndex)
},
...
页面执行之后,可以看到控制台 有打印创建的<tr>节点等信息(此处略过)
我们需要了解到 rowspan、colspan跨行和跨列的属性布局。在所跨的行或者列,在其他行或者列中也是占位的。所以在图1中,假如我们要让第一列(库名)合并为图2中的样子,那我们需要设置第一个tr元素下的td元素的rowspan,具体的数值为当前页显示的条数;这样设置之后,第一项AHISTER是跨过10行,因此在接下来的9行中,第一列已经是默认被占了,行中的td列是从第二列开始布局;所以,应该设置在本行中与第一行中设置了rowspan对应td元素为隐藏状态,so~~~添加以下代码
var currentListCount = 0;
$(“#Demo”).dataTable({
"createdRow": function( row, data, dataIndex ) {
if(dataIndex==0){
$(row).children().eq(0).attr("rowspan",currentListCount);
$(row).children().eq(1).attr("rowspan",currentListCount);
$(row).children().eq(2).attr("rowspan",currentListCount);
$(row).children().eq(3).attr("rowspan",currentListCount);
}else{
$(row).children().eq(0).hide()
$(row).children().eq(1).hide()
$(row).children().eq(2).hide()
$(row).children().eq(3).hide()
}
},
“ajax”:function(datatablesData,callback,settings){
...
success : function(result) {
currentListCount = (result.pageSize < result.totalRecord?result.totalRecord:result.pageSize)
}
...
}
...
上述currentListCount为存放当前页的显示内容条数,result.pageSize 为当前页面配置的显示条数,result.totalRecord为数据总条数,具体按照自己的进行配置。到此结束