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

});

jquery datatable显示隐藏子表的更多相关文章

  1. js和jquery实现显示隐藏

    (选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...

  2. js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

  3. Jquery datatable 动态隐藏列(根据有无值)

    一场景: 前端利用datatable初始化的时候会向后端调用数据,需求是 要动态的使某一列根据传回来的一个标志位是否有值来决定显示与否 这是当前传回值有活动优惠幅度的情况下 这是没有活动优惠的情况下 ...

  4. jquery grid 显示隐藏列

    colModel: [ { label: '列名称', name: 'columnName', width: 100, align: 'left' } ] function showData() { ...

  5. JQuery - 垂直显示隐藏DIV

    效果: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFor ...

  6. 基于jquery封装通用的控制显示隐藏的方法

    应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...

  7. JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  8. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  9. jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

随机推荐

  1. 黑马程序员----java基础:String与StringBuffer及基本数据类型包装类

    ------- android培训.java培训.期待与您交流! ---------- java中一些基础类比如String.StringBuffer和基本数据类型包装类都是非常常见且使用非常频繁的类 ...

  2. iTOP-4412开发板-实战教程-ssh服务器移植到arm开发板

    本文转自迅为开发板:http://www.topeetboard.com 在前面实战教程中,移植了“串口文件传输工具”,整个移植过程是比较简单的,而且我 们没有做任何协议方面的了解,只是“配置”+“编 ...

  3. group by 和 聚合函数的使用

    有这样一个表数据: 学生姓名,学生手机号,上课日期,上课科目 科目分: 语文.数学.英语.计算机 要求统计一个这样子的结果: 学生姓名,学生手机号,第一次上课日期,迄今一共上了多少节课,上的最多的科目 ...

  4. eureka 注册中心

    1.eureka版本更新后,pom依赖名称变化 v1.2.7spring-cloud-starter-eureka-server v2.0.0spring-cloud-starter-netflix- ...

  5. CREATE GROUP - 定义一个新的用户组

    SYNOPSIS CREATE GROUP name [ [ WITH ] option [ ... ] ] where option can be: SYSID gid | USER usernam ...

  6. vue 模板下只能有一个跟节点 根节点一定要是个div

    <template> <div>简单说就是里面只能有一个跟的div button1.vue <template> <div> <Button> ...

  7. Less用法注意事项

    (1)引入顺序 引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”: <link rel="stylesheet/less" t ...

  8. nginx配置实现负载均衡

    一.负载均衡的作用 1.转发功能 按照一定的算法[权重.轮询],将客户端请求转发到不同应用服务器上,减轻单个服务器压力,提高系统并发量. 2.故障移除 通过心跳检测的方式,判断应用服务器当前是否可以正 ...

  9. 「 Luogu P2657 」 windy数

    # 题目大意 给出区间 $[a,b]$,求出区间中有多少数满足下列两个条件 不含有前导 $0$. 相邻两个数字之差的绝对值至少是 $2$. # 解题思路 数位 $DP$,用记忆化搜索来实现.设 $dp ...

  10. <Redis> 入门六 主从复制方式的集群

    1.集群如何操作 现在有三台虚拟机,ip分别为100,105,106,将100作为master,其他两台作为slave 1.vim redis.conf 以前的版本是 slaveof <mast ...