JqueryDatatables合并内容列
效果图
近期在尝试做⼀个添加数据库字段备注的功能，图1如下：
可以看到库名和表名存在冗余数据，我们想要的结果应该是下⾯这样的图2：
步骤
初略浏览了DataTables的⼿册，发现⼿册上只描述了怎么合并表头，没有具体合并内容的教程，但是在⼿册的Event事件中，有⼀个，这个⽅法可以获取到创建的tr内容，于是想到试试⽤ rowspan 这个属性来合并列（合并⾏同理）
在构造函数中添加createdRow的⽅法：
$(“#Demo”).dataTable({
"createdRow": function( row, data, dataIndex ) {
console.log("")
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 < alRecord:result.pageSize)
}
...
jquery的attr属性
}
...
上述currentListCount为存放当前页的显⽰内容条数，result.pageSize 为当前页⾯配置的显⽰条数，alRecord为数据总条数，具体按照⾃⼰的进⾏配置。到此结束

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。