本来呢，只要做一个跨行就可以了~
但是呢，跑起来发现数据量特别大~
没有办法就只好加一个子表了
上图~~~这个是美化版本
首先po上跨行table的代码
//文档加载事件 $(function () { //---------------------------初始化Datatable Begin-------------------------- var oTable = $('#example').DataTable({ "sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>", "iDisplayLength": 5, "bAutoWidth": false, //是否自适应宽度 "serverSide": true, //启用服务器端分页 "oTableTools": { "aButtons": [ "copy", "csv", "xls", "pdf", "print" ], "sSwfPath": "assets/swf/copy_csv_xls_pdf.swf" }, "bFilter": false,//去掉搜索框 "ordering": false, // 禁止排序 "bLengthChange": false, //去掉页显示数量框 "language": { "search": "", "sLengthMenu": "_MENU_", "oPaginate": { "sPrevious": "上一页", "sNext": "下一页" } }, columns: [ { data: 'IDNumber', title: "身份证" }, { data: 'HomePhoneNumber', title: "电话" }, { data: 'PatientAddress', title: "地址" } ], "ajax": function (data, callback, settings) { var param = {}; param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候 param.start = data.start;//开始的记录序号 param.page = (data.start / data.length) + 1;//当前页码 var page = param.page; var limit = param.limit; $.ajax({ type: "get", url: 'ajax/test.ashx', data: { action: 'test', PageIndex: page, PageSize: limit },//传入组装的参数 cache: false, //禁用缓存 dataType: "json", success: function (result) { if (result != null) { //封装返回数据 var returnData = {}; returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回 returnData.recordsTotal = result.v.Total;//返回数据全部记录 returnData.recordsFiltered = result.v.Total;//后台不实现过滤功能，每次查询均视作全部结果 returnData.data = result.v.RowData;//返回的数据列表 //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染 //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕 callback(returnData);//回调函数 } } }); }, columnDefs: [//跨行代码 { targets: 0,//第0列 createdCell: function (td, cellData, rowData, row, col) { var RowsPan = rowData.RowsPan; //合并行数 var PatitionOrderId = rowData.PatitionOrderId; //区域内排序标识 if (PatitionOrderId == 1) { $(td).html('<button class="btn btn-' + showcolor+' btn-circle btn-circle-lg" type="button" style="display: block;width: 100px;height: 100px;"><p class="name">' + rowData.Name + '</p></button>'); } else { $(td).remove(); } } } , { targets: [1,2],//其他列我是为了加背景颜色 createdCell: function (td, cellData, rowData, row, col) { if (rowData.IsAddColor) { $(td).css("background-color", "#A4D3EE"); } } } ] }); //---------------------------初始化Datatable End--------------------------- //点击+号展开 $('#example tbody').on('click', 'td span.details-control', function () { //找到父表的最后一行数据，将子表放在最后一行的下面 var tr = $("#example>tbody>tr:last"); var row = oTable.row(tr); if (row.child.isShown()) {//收缩 row.child.hide(); tr.removeClass('shown'); } else {//展开 var table = ''; $.ajax({ type: "get", url: 'ajax/test.ashx', data: { a: 'querylist', Id: row.data().Id },//传入组装的参数 cache: false, //禁用缓存 dataType: "json", async: false, success: function (result) { var str = ""; var data = result.RowData; if (result.Total > 0) { //拼接表格头部 table += '<table id="childTable_' + row.index() + '" class="table table-striped">'; table += '<thead><tr class="active"><th><input type="checkbox" class="chkheader" onclick="ChkHeader(\'' + row.data().Id + '\',this,\'' + row.index() + '\')"/>id</th><th>姓名</th></tr></thead>'; table += '<tbody>'; //拼接表格身体部分 for (var i = 0; i < result.v.Total; i++) { table += '<tr><td><input type="checkbox" data-datas=\'' + JSON.stringify(data[i]) + '\' name="chkChild' + row.data().Id + '"/></td><td>' + data[i]["Name"] + '</td></tr>'; } table += '</tbody></table>'; } } }); //将html代码转为jquery对象 //$(table).DataTable和$(table).dataTable是不一样的，不要弄错 var childTable = $(table).DataTable({ order: [0, "desc"], columnDefs: [{ sortable: false, targets: [1, 2] }], "language": { "search": "", "sLengthMenu": "_MENU_", "oPaginate": { "sPrevious": "上一页", "sNext": "下一页" } }, "bFilter": false,//去掉搜索框 "ordering": false, // 禁止排序 "bLengthChange": false, //去掉页显示数量框 }); //将子表放到最后一行的下面 row.child(childTable.table().container()).show(); tr.addClass('shown'); } }); });
jquery代码po完了
来说后台返回数据的问题（我的分区条件是手机号和身份证相同的判断为同一人）
要得到的数据结构
rownumber：自增标识（有多少条数据）
PatitionId：分区后自增标识（有多少个区块，每个区块下的数据条数不一样），看做总数用于分页
PatitionOrderId：分区后区域内自增标识
RowsPan：跨行数
po上数据库代码
with ranks as ( select row_number() over(partition by Mobile,IDCard order by r.createtime desc) PatitionOrderId ,r.* from Users r --where r.Name like '%张%' --查询条件 ), counts as ( SELECT MAX(c.PatitionOrderId) RowsPan,ROW_NUMBER() OVER ( ORDER BY (SELECT 0)) AS PatitionId ,c.Mobile,c.IDCard from ranks c group by c.Mobile,c.IDCard ) select * from ( select ROW_NUMBER() OVER ( ORDER BY (SELECT 0)) AS rownumber,counts.PatitionId,counts.RowsPan,ranks.* from ranks left join counts on ranks.Mobile = counts.Mobile and ranks.IDCard = counts.IDCard )temp --where PatitionId>(1-1)*2 and PatitionId<=1*2 --分页
这个分页我是我写成了存储过程的，因为方便一点，自行封装吧。。。
简单版本来了
写完啦！！！~~~
最近写博客，感觉自己相当敷衍，就是po就完了。。。。
批评一下自己