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);
}
});
});
jquery datatable显示隐藏子表的更多相关文章
- js和jquery实现显示隐藏
(选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...
- js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么
js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...
- Jquery datatable 动态隐藏列(根据有无值)
一场景: 前端利用datatable初始化的时候会向后端调用数据,需求是 要动态的使某一列根据传回来的一个标志位是否有值来决定显示与否 这是当前传回值有活动优惠幅度的情况下 这是没有活动优惠的情况下 ...
- jquery grid 显示隐藏列
colModel: [ { label: '列名称', name: 'columnName', width: 100, align: 'left' } ] function showData() { ...
- JQuery - 垂直显示隐藏DIV
效果: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFor ...
- 基于jquery封装通用的控制显示隐藏的方法
应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...
- JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
- jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
随机推荐
- mybatis-paginator对SqlServer分页实现
package com.github.miemiedev.mybatis.paginator.dialect; import com.github.miemiedev.mybatis.paginato ...
- -webkit/IE/Firefox的一些样式
仅限于-webkit的样式特效:-webkit-overflow-scrolling:touch;滚动时回弹效果:如果出现偶尔卡住不动的情况,那么在使用该属性的元素上不设置定位或者手动设置定位为sta ...
- jquery日期控件+时分秒
因为项目需要,一些时间上的查询要精确的时分.先看下效果图吧. 所需要的js 跟css 文件 jsp://特别注意引入的先后顺序 <link rel="stylesheet" ...
- codeforces_1075_C. The Tower is Going Home
http://codeforces.com/contest/1075/problem/C 题意:一个长宽均为1e9的棋盘,n个垂直障碍在x列无限长,m个水平障碍在第y行从第x1列到x2列.可以水平和垂 ...
- node.js querystring类介绍
querystring 模块提供了一些实用函数,用于解析与格式化 URL 查询字符串. 使用以下方法引入: const querystring = require('querystring'); 此类 ...
- Java IO(二)--RandomAccessFile基本使用
RandomAccessFile: 翻译过来就是任意修改文件,可以从文件的任意位置进行修改,迅雷的下载就是通过多个线程同时读取下载文件.例如,把一个文件分为四 部分,四个线程同时下载,最后进行内容拼接 ...
- Vue+Bootstrap实现购物车程序(1)
先看下案例效果:(简单的数量控制及价格运算) 代码: <!DOCTYPE html> <html> <head lang="en"> <m ...
- vim要粘贴的话,先set paste,然后粘贴,然后再set nopaste
要粘贴的话,先set paste,然后粘贴,然后再set nopaste
- torch学习笔记(二) nn类结构-Linear
Linear 是module的子类,是参数化module的一种,与其名称一样,表示着一种线性变换. 创建 parent 的init函数 Linear的创建需要两个参数,inputSize 和 outp ...
- oracle调用存储过程和函数返回结果集
在程序开发中,常用到返回结果集的存储过程,这个在mysql和sql server 里比较好处理,直接返回查询结果就可以了,但在oracle里面 要 out 出去,就多了一个步骤,对于不熟悉的兄弟们还得 ...