直接上代码,原理之前的随笔已经讲过了。http://www.cnblogs.com/hdwang/p/7115835.html1.先看看效果 2.html代码,含js代码<!DOCTYPE html><html lang="zh-CN"& ...
直接上代码,原理之前的随笔已经讲过了。http://www.cnblogs.com/hdwang/p/7115835.html
1.先看看效果
2.html代码,含js代码
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>cpm system</title> <!-- Bootstrap --> <link href="http://www.cnblogs.com//thirdlib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- datatables --> <link href="http://www.cnblogs.com//thirdlib/datatables/css/jquery.dataTables.min.css" rel="stylesheet"/> <link href="http://www.cnblogs.com//css/common.css" rel="stylesheet" /></head><body><div id="tableArea" style="padding: 100px;"> <table id="rowspanTable" class="table table-bordered"> <thead> <th>地区</th> <th>公司</th> <th>部门</th> <th>员工姓名</th> </thead> </table></div></body><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src='/images/loading.gif' data-original="http://www.cnblogs.com//thirdlib/jquery/jquery-2.0.3.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src='/images/loading.gif' data-original="http://www.cnblogs.com//thirdlib/bootstrap/js/bootstrap.min.js"></script><!-- datatables --><script src='/images/loading.gif' data-original="http://www.cnblogs.com//thirdlib/datatables/js/jquery.dataTables.min.js"></script><script src='/images/loading.gif' data-original="http://www.cnblogs.com//js/common.js"></script><script type="text/javascript"> $(function(){ $('#rowspanTable').dataTable( { "paging": true, "processing": true, "serverSide": true, "searching":false, //搜索栏 "lengthChange" : false, //是否允许改变每页显示的数据条数 "pageLength": 10, //每行显示记录数 "info":true, //开启Datatables信息显示(记录数等) "ordering":false, //全局定义是否启用排序,优先级比columns.orderable高 "language": language, "ajax": { "url": "/home/query", "type": "POST" }, "columns": [ {"data":"area", "orderable": false,"searchable": false}, { "data": "company", "orderable": false ,"searchable": false}, { "data": "department", "orderable": false,"searchable": false }, { "data": "userName", "orderable": false ,"searchable": false} ], "columnDefs": [{ targets: [0,1,2], //第1,2,3列 createdCell: function (td, cellData, rowData, row, col) { var rowspan = 1; if(col == 0){ rowspan = rowData.areaRowSpan; } if(col ==1){ rowspan = rowData.companyRowSpan; } if(col ==2){ rowspan = rowData.departmentRowSpan; } if (rowspan > 1) { $(td).attr('rowspan', rowspan) } if (rowspan == 0) { $(td).remove(); } } }] } ); });</script></html>
原标题:DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)
关键词:DataTable
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。