Jquery DataTable跨行+子表

本來呢，只要做一個跨行就可以了~

但是呢，跑起來發現數據量特別大~

沒有辦法就只好加一個子表了

上圖~~~這個是美化版本

 

 首先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就完了。。。。

 批評一下自己