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.隐藏列前获取数据 看这样一个例子(以下均以此 ...
随机推荐
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ROS多机通信计算机网络配置
以实现master和nico的互联共享信息为例 1 查看IP地址 $ifconfig 查看ip地址 可以看到 master的IP为192.168.1.10 nico的IP为192.168.1.103 ...
- P2物理引擎中文文档
P2物理引擎中文文档地址:https://github.com/schteppe/p2.js/wiki/Chinese-wiki-%E4%B8%AD%E6%96%87%E7%BB%B4%E5%9F%B ...
- MVC 5 + EF6 完整教程15 -- 使用DI进行解耦
如果大家研究一些开源项目,会发现无处不在的DI(Dependency Injection依赖注入). 本篇文章将会详细讲述如何在MVC中使用Ninject实现DI 文章提纲 场景描述 & 问题 ...
- 进入html+css世界的正确姿势
今天,我带大家一起走进html+css的世界. HTML其实是HyperText Markup Language的缩写, 超文本标记语言.他是用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个H ...
- 学习MVC之租房网站(二)-框架搭建及准备工作
在上一篇<学习MVC之租房网站(一)-项目概况>中,确定了UI+Service的“双层”架构,并据此建立了项目 接下来要编写Common类库.配置AdminWeb和FrontWeb 一.编 ...
- 前端jquery validate表单验证框架的使用
一.框架本身校验方法的扩展 建议写在页内用于扩展框架本身的一些校验方法, 使用频繁也可以直接在源码上修改 例如扩展手机号码的校验: /*手机号码验证扩展 最新的号码 mobile: class的表示 ...
- 移动端emoji图标的存储和显示
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/6694595.html 一.emoji是什么 绘文字(日语:絵文字/えもじ emoji)是日本在无线通信中所使用的 ...
- jquery-ul-li实现分页功能 转载仅供交流
js文件代码: (function($){ $.fn.Pages = function(options){ var opts = $.extend({},$.fn.Pages.defaults, op ...
- Virtualbox 复制 CentOS 虚拟机无法联网
Centos刚装好后无法联网 复制虚拟机后,出现 No such device eth0 我们要处理的三个问题: 在Virtualbox上安装好Centos后如何联网 如何在Virtualbox上复制 ...