您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息

DataTables实现rowspan思路实例详解

2024/4/25 16:30:06发布6次查看
直接看例子吧
<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思路实例详解的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录