jquery datatable显示隐藏子表

Posted 2020-09-26 小小猫钓小小鱼

<table id="parentTable">
    <thead>
        <tr>
            <th></th>
            <th>Values</th>
            <th>Number</th>
            <th>Other</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class=‘expander‘>+</span>
            </td>
            <td>value 1</td>
            <td>111</td>
            <td>xyz</td>
        </tr>
        <tr>
            <td><span class=‘expander‘>+</span>
            </td>
            <td>value 2</td>
            <td>222</td>
            <td>xyz</td>
        </tr>
        <tr>
            <td><span class=‘expander‘>+</span>
            </td>
            <td>value 3</td>
            <td>333</td>
            <td>xyz</td>
        </tr>
    </tbody>
</table>

js:

$(function () {
    var parentTable = $("#parentTable").DataTable({
        order: [1, "asc"],
        columnDefs: [{
            sortable: false,
            targets: [0]
        }]
    });


    $(".expander").css({
        cursor : "pointer"
    }).click(function () {
        var row = parentTable.row($(this).closest("tr"));
        
        if(row.child() == undefined){
            $(this).html("-");
            var $table = $("<table><thead><tr><th>InnerV1</th><th>InnerV2</th><th>InnerV3</th><th>InnerV4</th></tr></thead><tbody><tr><td>foo</td><td>bar</td><td>biz</td><td>baz</td></tr><tr><td>baz</td><td>biz</td><td>bar</td><td>foo</td></tr><tr><td>bar</td><td>foo</td><td>baz</td><td>biz</td></tr></tbody></table>");
            $table.attr("id", "childTable_" + row.index());
            var childTable = $table.DataTable({
                order: [0, "desc"],
                columnDefs: [{
                    sortable: false,
                    targets: [1, 2]
                }]
            });
            
            row.child(childTable.table().Container());
            row.child.show();
        } else {
            $(this).html("+");
            row.child(false);
        }
    });


});