直接看例子吧
<table id="example" class="display table table-bordered" cellspacing="0" width="600" style="margin-top: 50px"><thead><tr><th>name</th><th>position</th><th>age</th></tr></thead></table>
var dataset = [
[ tiger nixon, edinburgh,20,1 ],
[ garrett winters, tokyo,22,2],
[ ashton cox, tokyo,21,0 ]
];
$('#example').datatable({
data: dataset,
paging: true,
searching:false, //搜索栏lengthchange : false, //是否允许改变每页显示的数据条数ordering:false,
columndefs: [{
targets: 1,
createdcell: function (td, celldata, rowdata, row, col) {var rowspan = rowdata[3];if (rowspan > 1) {
$(td).attr('rowspan', rowspan)
}if (rowspan == 0) {
$(td).remove();
}
}
}]
});
说明一下:要实现rowspan/colspan这样的特殊效果需要用到createdcell回调函数,此函数可配置在column.render配置中,亦可配置在columndefs中,此例采用columndefs配置实现。具体原理是,在创建单元格cell的是否控制怎样渲染,后台需要定义好rowspan的值,这个需要后台想办法给出这个值。
后台给出rowspan的思路:
将需要分组的属性构造map<key,count> map,遍历list得到map,再遍历list设置rowspan=map.get(key),get过的key再get设置0, ok, 搞定
以上就是datatables实现rowspan思路实例详解的详细内容。