Jquery Datatables(三)

最近在项目中又使用Datatables的一个有趣功能，官网列子如下图：

点击“+”，展开列表，再次点击收缩。

官网的列子点击展开后的数据也是原来行中的数据，这边有了一个想法是否可以利用Ajax去动态加载数据，让“+”实现主从表的功能？

分析后觉得可以，动手实验。

首先，敲代码去实现不带“+”的表格，这个应该很简单。

然后加入一列，让第一列展示一个“+”图片。

     var table = $('#example').DataTable({
         "bSort": false, //排序设置为False
         "bFilter": false,//搜索设置为False
         "sAjaxSource": "/XXXX/XXXX/XXXX",
         "aoColumns": [
              {
                  "mDataProp": "Id",
                  "className": 'details-control',    //运用样式来加载图片
                  "render": function (data, type, row) {
                      return '';    //关键，让第一列什么都不现实
                  }
              },
             {
                 "mDataProp": "Name"
             },

             { "mDataProp": "WorkDay" }
         ]
     });

Datatables

其中，CSS的样式可以参考官网列子：

 td.details-control {
     background: url('../resources/details_open.png') no-repeat center center;
     cursor: pointer;
 }
 tr.shown td.details-control {
     background: url('../resources/details_close.png') no-repeat center center;
 }

CSS代码

接下来，就是如何让点击“+”时展开并加载数据，添加监听事件：

     //对TR中每行扩展，缩小添加事件
     $('#example tbody').on('click', 'td.details-control', function () {
         var tr = $(this).closest('tr');
         var row = table.row(tr);

         var employeeId = row.data().EmployeeID;
         var workDate = row.data().WorkDate;

         if (row.child.isShown()) {
             row.child.hide();
             tr.removeClass('shown');
         }
         else {
             //通过Ajax获取从表信息
             $.ajax({
                 url: "/XX/XXX/XXX",
                 type: "Get",
                 data: { "XXX": XXX, "XX": XXX },
                 success: function (data) {
                     row.child(format(data)).show();
                     tr.addClass('shown');
                 }
             });
         }
     });

添加监听事件

其中format函数需要利用Ajax返回数据实现动态表格也就是用js拼接Html代码：

     //动态添加表格
     function format(data) {
         var total = data.total;

         //通过JSON数据创建table表
         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>' +
                         '<tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td><td></td></tr></thead>';
         for (var i = 0; i < total; i++) {
             var d = data.data[i];
             if(i%2==0){//隔行颜色不同设置
                 tableHtml += '<tr class="success">';
             } else
             {
                 tableHtml += '<tr>'
             }
             tableHtml +=
                             '<td style="vertical-align: middle">' + d.XXX.substr(0, 10) + '</td>' +
                             '<td style="vertical-align: middle">' + d.XXX + '</td>' +
                             '<td style="vertical-align: middle">' + d.XXX + '</td>' +
                             '<td style="vertical-align: middle">' + d.XXX + '</td>' +
                             '<td style="vertical-align: middle">' + d.XXX + '</td>' +
                             '<td style="vertical-align: middle"><button class="btn btn-danger btn-xs" type="btn" onclick="deleteItem(\'' + d.Id + '\')">删除</button></td>' +
                         '</tr>';
         }
         tableHtml += '</table></div></div>';
         return tableHtml;
     }

动态拼接表格