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

这是没有活动优惠的情况下

可以发现【活动优惠幅度】这一列都被隐藏了
二、实现方法及原理
实现难度:datatable是js动态生成结果集也就是(<tr><td>),也就是说我们无法在html的标签中手动的加入id或者class
实现过程:在 "columns":[] 的当前列之中 如 {orderable: false,sClass:"hiddenCol",data:'name'} 在name这一列中加入 sClass:"hiddenCol" ,这个属性会给当前列的td 以及之前我们定义好的列名都加上这个class
加上了class之后我们就可以当前class的css的显示与否了
我们需要在datatable的初始参数中加入
dataTable: {
"initComplete": function(settings, json) {
},"columns": [{....}]
}
initComplete是datatable初始化弯沉之后执行的方法 ,并且传入了settings和json(服务器返回的全部数据,可以用console.log(json)来查看格式)
在这个方法中就可以来判断服务器传回来的值有没有活动,然后来通过class来控制是否显示了,下面付上我的方法,我把我的很多的业务逻辑代码删了,这样更直观一些
dataTable: {
"ajax": {
"url": "",
type: 'GET',
"dataType": 'json'
},
"initComplete": function(settings, json) {
var data = json.data;
if (data.length>0){
var name = data[0].name;
if (name==""||name==undefined){
$(".hiddenCol").css("display","none");
}
}else{
$(".hiddenCol").css("display","none");
}
},
"columns": [
{
.....
}
,
{orderable: false,sClass:"hiddenCol",data: 'name'}
]
}
Jquery datatable 动态隐藏列(根据有无值)的更多相关文章
- NPOI 读取excel到DataTable 读取隐藏列 读取公式列
处理思路: 1.打开excel 用NPOI进行读取: 2.读取第一个Sheet: 读取过程中: a.先设置相应列 不隐藏 b.读取Cell时 先判断是否的包含公式 相应代码如下: public sta ...
- SAP ABAP编程 Table Control动态隐藏列
在SAP DIALOG设计中,有时候须要动态的隐藏某些列,以下是方法. ***数据定义 CONTROLS: table_control TYPE TABLEVIEW USING SCREEN 0100 ...
- 获取DataTable某一列的所有值
/// <summary> /// 获取某一列的所有值 /// </summary> /// <typeparam name="T">列数据类型 ...
- datatable 动态显示/隐藏列
这个例子演示了 column().visible()方法来隐藏显示列,通过点击列按钮动态切换 <table id="example" class="display& ...
- jquery grid 显示隐藏列
colModel: [ { label: '列名称', name: 'columnName', width: 100, align: 'left' } ] function showData() { ...
- Jquery DataTable控制显示列,导出EXCEL
1.初始化 var table = $('#table').DataTable({ "data": data[0].DATA, "columns": data[ ...
- 使用JQuery,动态增加列
这也是我在自己学做网站时无意搞出来的,希望可以对别人有所启发 <%@ page language="java" import="java.util.*" ...
- jquery datatable显示隐藏子表
<table id="parentTable"> <thead> <tr> <th> ...
- ASP.new GridView获取隐藏列值的几种方法
解决方法: 原文来自:http://www.tzwhx.com/NewShow/newBodyShow/控件_32933.html 作者:lerit 1.隐藏列前获取数据 看这样一个例子(以下均以此 ...
随机推荐
- git 入门宝典
本篇教程是按照我自己的组织方式,然后从多篇教程中拼凑出来的,嘎嘎~,真佩服自己的技术! 原本想叫 git 宝典的,结果一查git的命令大全,还有那么多的git命令与功能没有接触到,所以...还是谦虚一 ...
- Android 微信第三方登录
步骤一 微信开发者平台 我开始的解决思路是,去微信开发者平台看API文档. 这个API文档的主要意思呢,有三点: 1.你得下载这几样东西(下载链接),一个是他的范例代码,一个是他的签名生成工具. 2. ...
- 3.Java集合总结系列:Set接口及其实现
一.Set接口 Set 接口与 List 接口相比没有那么多操作方法,比如: 1.List 接口能直接设置或获取某个元素的值,而Set接口不能. 2.List 接口能直接在指定位置删除.增加元素,而S ...
- 浅析Thread类run()和start()的区别
1.先看看jdk文档 void run() If this thread was constructed using a separate Runnable run object, then that ...
- Robotframe work学习之初(二)
一.F5帮助 Robot Framework 并没有像其它框架一样提供一份完整的 API 文档,所以,我们没办法通过官方 API文档进行习.RIDE 提供了 F5 快捷键来打开帮助文档. search ...
- 浅谈echo、print、var_dump()、print_r()的区别
1.echo 和 print 的区别 共同点:首先echo 和 print 都不是严格意义上的函数,他们都是语言结构;他们都只能输出 字符串,整型跟int型浮点型数据.不能打印复合型和资源型数据: 而 ...
- 腾讯云安全:开发者必看|Android 8.0 新特性及开发指南
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 背景介绍 谷歌2017 I/O开发者大会今年将于5月17-19日在美国加州举办.大会将跟往年一样发布最新的 A ...
- 细谈UITabBarController
1.简述 UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,UITabB ...
- java复习(8)---I/O
本节复习java常用i/o,输入输出流. 先放上样例代码.方便参考,可以轻松看懂. package re08; import java.io.*; import java.util.Scanner; ...
- rsync远程同步
一.概念 Rsync是一个开源的快速备份工具,可以在不同主机之间镜像同步整个目录树,支持增量备份,保持连接和权限,且采用优化的同步算法,传输前执行压缩,因此非常适用于异地备份,镜像服务器等应用.rsy ...