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" }
        ]
    });

其中，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;
}

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

    //对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;
    }