直接看例子吧

<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回调函数,此函数可配置在columns配置中,亦可配置在columnDefs中,此例采用columnDefs配置实现。具体原理是,在创建单元格cell的是否控制怎样渲染,后台需要定义好rowspan的值,这个需要后台想办法给出这个值。

后台给出rowspan的思路:

将需要分组的属性构造Map<key,count> map,遍历list得到map,再遍历list设置rowspan=map.get(key),get过的key设置0再get, OK,  搞定

具体实现:

http://www.cnblogs.com/hdwang/p/7169255.html

DataTables实现rowspan思路的更多相关文章

  1. DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)

    直接上代码,原理之前的随笔已经讲过了.http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果 2.html代码,含js代码 2.1 common.js ...

  2. ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

    引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...

  3. thinkphp+datatables+ajax 大量数据服务器端查询

    今天一白天全耗在这个问题上了,知乎2小时除外... 现在19:28分,记下来以备后查. 问题描述:从后台数据库查询人员信息,1w多条,使用一个好看的基于bootstrap的模板 Bootstrap-A ...

  4. DataTables ajax + bootstrap 分页/搜索/排序/常见问题

    最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...

  5. JS table内容转成二维数组,支持colspan和rowspan

    思路:1.先初始化colspan的数据到数组2.根据rowspan和colspan计算th和td的矩阵二次填充数组 说明:需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确 & ...

  6. React 合并行 RowSpan

    十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今儿分享一篇关于React Table 组件合并单元行的方法! 实例效果如下: 原则就是遇到相同的供方名称,就要做行合并! 思路如下:后端计算合并的 ...

  7. Datatables js 复杂表头 合并单元格

    x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官 ...

  8. easyui DataGrid表体单元格跨列rowspan

    最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的,客户要求报表样式跟他们原有系统的一模一样(如下图1). DataGrid样式好调,只是城市名称单元格跨行 ...

  9. sqlalchemy & python & datatables & javascript 中文拼音排序

    近期有中文拼单排序需要,查询资料,mysql数据库有convert函数支持 select cname from channel order by convert(cname using gbk); # ...

随机推荐

  1. css忽略某一层的存在:pointer-events:none

    其实早知道这个属性,但是一直没有去研究过.今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下.嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需 ...

  2. 带你轻而易举的学习python——八皇后问题

    首先我们来看一下这个著名的八皇后问题 八皇后问题:在8×8格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行.同一列或同一斜线上,问有多少种摆法. 在这个问题提出之后人们又将 ...

  3. ossec代理

    代理端 OSSEC有两种代理端:可安装的代理端和哑代理端(免安装).可安装的代理端被安装在主机上,通过OSSEC的加密协议将主机的信息发送到OSSEC服务器.亚代理端则不需在远端主机进行安装.他作为O ...

  4. node http模块搭建简单的服务和客户端

    node-http Node.js提供了http模块,用于搭建HTTP服务端和客户端. 创建Web服务器 server.js /** * node-http 服务端 */ let http = req ...

  5. Scrum Meeting 10.30

    成员 今日任务 明日计划 用时 徐越 配置servlet环境,设计开发文档 设计开发文档,配置服务器,使得本地可以访问服务器 5h 武鑫 软件界面设计:学习使用Activity和Fragment 设计 ...

  6. Daily Scrumming* 2015.10.25(Day 6)

    一.总体情况总结 1.UI今日总结:初步设计了社团详情界面 2.后端今日总结:讨论并设计数据库,表内容,属性和相互联系等,并在rails的activeRecord和activeModel中实现,同时设 ...

  7. java的第二个实验——JAVA面向对象程序设计

    java的第二个实验——JAVA面向对象程序设计 北京电子科技学院 实     验    报     告 课程:Java程序设计 班级:1352 姓名:林涵锦 学号:20135213 成绩:      ...

  8. 奔跑吧DKY——团队Scrum冲刺阶段-Day 6

    今日完成任务 谭鑫:制作相应动画人物,并实现人物动画 黄宇塘:制作相应动画人物,并实现人物动画,制作背景图 赵晓海:制作相应动画人物,并实现人物动画 方艺雯:制作相应动画人物,并实现人物动画,编写博客 ...

  9. 《Spring1之第四次站立会议》

    <第四次站立会议> 昨天:我把小组成员找到的写关于登录界面的代码加到了我的项目工程里,并对它有了一定的了解,已经能够编译运行了,得到了登陆的界面: 今天:试着做了一下主框架里的在线人数的显 ...

  10. SqlServer中的dbo是什么意思

    出处:http://andylin02.iteye.com/blog/486296 SqlServer中的dbo是什么意思? DBO是每个数据库的默认用户,具有所有者权限,即DbOwner 通过用DB ...