直接看例子吧
<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思路实例详解的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
908
