Jquery Datatables合并内容列

效果图

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)
		  },
		  ...

页面执行之后，可以看到控制台 有打印创建的节点等信息(此处略过)

我们需要了解到 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为数据总条数，具体按照自己的进行配置。到此结束