Jquery Datatables(三)

最近在項目中又使用Datatables的一個有趣功能，官網列子以下圖：

點擊「+」，展開列表，再次點擊收縮。

官網的列子點擊展開後的數據也是原來行中的數據，這邊有了一個想法是否能夠利用Ajax去動態加載數據，讓「+」實現主從表的功能？

分析後以爲能夠，動手實驗。

首先，敲代碼去實現不帶「+」的表格，這個應該很簡單。

而後加入一列，讓第一列展現一個「+」圖片。

 1     var table = $('#example').DataTable({
 2         "bSort": false, //排序設置爲False
 3         "bFilter": false,//搜索設置爲False
 4         "sAjaxSource": "/XXXX/XXXX/XXXX",
 5         "aoColumns": [
 6              {
 7                  "mDataProp": "Id",
 8                  "className": 'details-control',    //運用樣式來加載圖片
 9                  "render": function (data, type, row) {
10                      return '';    //關鍵，讓第一列什麼都不現實
11                  }
12              },
13             {
14                 "mDataProp": "Name"
15             },
16 
17             { "mDataProp": "WorkDay" }
18         ]
19     });

Datatables

其中，CSS的樣式能夠參考官網列子：

1 td.details-control {
2     background: url('../resources/details_open.png') no-repeat center center;
3     cursor: pointer;
4 }
5 tr.shown td.details-control {
6     background: url('../resources/details_close.png') no-repeat center center;
7 }

CSS代碼

接下來，就是如何讓點擊「+」時展開並加載數據，添加監聽事件：

 1     //對TR中每行擴展，縮小添加事件
 2     $('#example tbody').on('click', 'td.details-control', function () {
 3         var tr = $(this).closest('tr');
 4         var row = table.row(tr);
 5 
 6         var employeeId = row.data().EmployeeID;
 7         var workDate = row.data().WorkDate;
 8 
 9         if (row.child.isShown()) {
10             row.child.hide();
11             tr.removeClass('shown');
12         }
13         else {
14             //經過Ajax獲取從表信息
15             $.ajax({
16                 url: "/XX/XXX/XXX",
17                 type: "Get",
18                 data: { "XXX": XXX, "XX": XXX },
19                 success: function (data) {
20                     row.child(format(data)).show();
21                     tr.addClass('shown');
22                 }
23             });
24         }
25     });

添加監聽事件

其中format函數須要利用Ajax返回數據實現動態表格也就是用js拼接Html代碼：

 1     //動態添加表格
 2     function format(data) {
 3         var total = data.total;
 4 
 5         //經過JSON數據建立table表
 6         var tableHtml = '<div class="row"><div class="col-sm-1"></div><div class="col-sm-11"><table class="table table-striped table-condensed table-bordered table-hover"><thead>' +
 7                         '<tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td><td></td></tr></thead>';
 8         for (var i = 0; i < total; i++) {
 9             var d = data.data[i];
10             if(i%2==0){//隔行顏色不一樣設置
11                 tableHtml += '<tr class="success">';
12             } else
13             {
14                 tableHtml += '<tr>'
15             }
16             tableHtml +=
17                             '<td style="vertical-align: middle">' + d.XXX.substr(0, 10) + '</td>' +
18                             '<td style="vertical-align: middle">' + d.XXX + '</td>' +
19                             '<td style="vertical-align: middle">' + d.XXX + '</td>' +
20                             '<td style="vertical-align: middle">' + d.XXX + '</td>' +
21                             '<td style="vertical-align: middle">' + d.XXX + '</td>' +
22                             '<td style="vertical-align: middle"><button class="btn btn-danger btn-xs" type="btn" onclick="deleteItem(\'' + d.Id + '\')">刪除</button></td>' +
23                         '</tr>';
24         }
25         tableHtml += '</table></div></div>';
26         return tableHtml;
27     }

動態拼接表格