zoukankan      html  css  js  c++  java
  • jquery datatable显示隐藏子表

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


    });





  • 相关阅读:
    如何打开肉鸡的3389端口(xp的)
    XP鲜为人知的实用技巧(一)
    利用Ms08067工具进行溢出攻击
    教你建一个别人看不到打不开的文件夹
    在IE上显示自己的名字
    QQ使用的七大非常规秘籍
    第五篇:Python函数基础篇
    Centos7之Systemd(Service文件)详解
    Linux GCC make文件的写法3
    DSP/BIOS学习笔记——2.SWI
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/7099360.html
Copyright © 2011-2022 走看看