DataTables实现rowspan思路
直接看例子吧
<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思路的更多相关文章
- DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)
直接上代码,原理之前的随笔已经讲过了.http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果 2.html代码,含js代码 2.1 common.js ...
- ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项
引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...
- thinkphp+datatables+ajax 大量数据服务器端查询
今天一白天全耗在这个问题上了,知乎2小时除外... 现在19:28分,记下来以备后查. 问题描述:从后台数据库查询人员信息,1w多条,使用一个好看的基于bootstrap的模板 Bootstrap-A ...
- DataTables ajax + bootstrap 分页/搜索/排序/常见问题
最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...
- JS table内容转成二维数组,支持colspan和rowspan
思路:1.先初始化colspan的数据到数组2.根据rowspan和colspan计算th和td的矩阵二次填充数组 说明:需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确 & ...
- React 合并行 RowSpan
十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今儿分享一篇关于React Table 组件合并单元行的方法! 实例效果如下: 原则就是遇到相同的供方名称,就要做行合并! 思路如下:后端计算合并的 ...
- Datatables js 复杂表头 合并单元格
x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官 ...
- easyui DataGrid表体单元格跨列rowspan
最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的,客户要求报表样式跟他们原有系统的一模一样(如下图1). DataGrid样式好调,只是城市名称单元格跨行 ...
- sqlalchemy & python & datatables & javascript 中文拼音排序
近期有中文拼单排序需要,查询资料,mysql数据库有convert函数支持 select cname from channel order by convert(cname using gbk); # ...
随机推荐
- MapReduce任务学习系列
首先放一张官方图片,大致了解下整个MapReduce的处理过程. 抛出如下疑问: 1.MapReduce的基本原理是什么?即利用什么机制来实现的任务拆分处理? 2.MapReduce任务执行过程是什么 ...
- php从入门到放弃系列-04.php页面间值传递和保持
php从入门到放弃系列-04.php页面间值传递和保持 一.目录结构 二.两次页面间传递值 在两次页面之间传递少量数据,可以使用get提交,也可以使用post提交,二者的区别恕不赘述. 1.get提交 ...
- FirstWebApp
servlet规范中定义了web应用程序的目录层次:http://localhost:8080/docs/appdev/deployment.html 第一个web应用程序 开发,并部署到tomcat ...
- Codeforces70 | Codeforces Beta Round #64 | 瞎讲报告
目录 前言 正文 A B C D E 前言 这个毒瘤的517 放了Div1 然后D题是昨天讲的动态凸包(啊喂!我还没来的及去写 结果自己想的是二分凸包 (当然没有写出来 写完前两题之后就愉快地弃疗 C ...
- linux下自己安装软件做成命令
安装nodejs,从官网下下来的是一个压缩包,解压下里面有可执行文件.教程上用ln -s [可执行文件的绝对路径] [/usr/local/bin/]建了一个软连接,这样就能直接无视路径,用命令行调用 ...
- 爱码室Crawler & classification module项目工作分配
项目情况 爬虫项目是上届学生遗留下来的项目,他们已经实现了基础的功能,而我们来负责完善,主要需要解决的问题是怎么让爬虫脱离爬和停的繁琐指令,更加的智能化.所以我们的计划是在前人的源码基础上,加以修改测 ...
- 《Spring 2之站立会议3》
<Spring 2之站立会议3> 昨天,查找了本机的端口号,并对代码作进一步的了解. 今天,对我们项目的基本框架进行了了解,即主界面和各个分界面的基本架构: 遇到的问题,虽然了解了基本框架 ...
- mianshi
https://blog.csdn.net/u012557610/article/details/80350099 https://blog.csdn.net/liuqiyao_01/article/ ...
- C#简单窗体应用程序(一)
使用C#创建控制台应用程序的基本步骤: (1)创建项目: (2)用户界面设计: (3)属性设置: (4)编写程序代码: (5)保存.调试.运行: 例题:创建一个Windows窗体应用程序,在窗体中添加 ...
- JavaBean 与 EJB 的区别
JavaBean在一般情况下指的是实体类,在大部分情况下和POJO是同义词,基本构成就是一些字段和与之对应的 setter.getter方法,如果一个JavaBean需要在不同的JVM的进程中进行传递 ...