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


    });





  • 相关阅读:
    asp 后台批量管理程序
    面经
    单例模式(singleton)解析例子
    互联网产品经理必读书籍
    Struts2中的OGNL表达式
    阿里巴巴面经
    Servlet/JSP如何控制页面缓存于squid中
    Java陷阱一箩筐面试题集及解答
    阿里巴巴笔经http://bbs.yingjiesheng.com/forum.php?mod=viewthread&tid=696098&extra=page%3D1%26filter%3Dtypeid%26typeid%3D6356%26typeid%3D6356
    阿里巴巴java笔试
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/7099360.html
Copyright © 2011-2022 走看看