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.隐藏列前获取数据 看这样一个例子(以下均以此 ...
随机推荐
- 【Egret】WebSocket 的使用说明
在Egret里可以使用WebSocket ,也可以使用socket.io 首先先深入了解一下 WebSocket 在Egret里的机制,看这篇文章: 主要讲解Egret里使用WebSocket和pro ...
- 测试开发Python培训:模拟登录新浪微博-技术篇
测试开发Python培训:模拟登录新浪微博-技术篇 一般一个初学者项目的起点就是登陆功能的自动化,而面临的项目不同实现的技术难度是不一样的,poptest在做测试开发培训中更加关注技术难点,掌握技 ...
- ios坐标位置转换
//ios常用坐标转换来处理一些下拉框队形的按钮的位置,我以最下面两个来进行一下个人的理解,不足之处多多见谅 - (CGPoint)convertPoint:(CGPoint)point toView ...
- Yum -userguide
Introduction Yum(Yellow dog Updater, Modified) is an automatic updater and package installer/remover ...
- 模拟退火算法(SA)求解TSP 问题(C语言实现)
这篇文章是之前写的智能算法(遗传算法(GA).粒子群算法(PSO))的补充.其实代码我老早之前就写完了,今天恰好重新翻到了,就拿出来给大家分享一下,也当是回顾与总结了. 首先介绍一下模拟退火算法(SA ...
- How To Use ggplot2
0. Preparation and Introduction ggplot2是R中新颖的数据可视化包,这得益于Leland Wilkinson在他的著作<The Grammar of Grap ...
- 你说你精通CSS,真的吗?
以前做项目的时候,学习了HTML和CSS,感觉这两个比较简单,在W3school里学习了一下之后,就觉得自己已经没问题了.可是,真正要做一个好看的页面,我还是要写好久.其实,对于CSS,我并没有像我以 ...
- SQL模糊查询条件的四种匹配模式
执行数据库查询时,有完整查询和模糊查询之分. 一般模糊语句格式如下: SELECT 字段 FROM 表 WHERE 某字段 LIKE 条件 其中关于条件,SQL提供了四种匹配模式: 1.% :表示任意 ...
- Webdriver API之操作(一)
一. 控制浏览器 1. 控制浏览器大小 driver.set_window_size(480,800) #浏览器宽480,高800显示 dirver.maximize_window() #浏览器最大化 ...
- jQuery animate()动画效果
1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...