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.隐藏列前获取数据 看这样一个例子(以下均以此 ...
随机推荐
- 在 WPF 中使用 Path 路径
在 WPF 中总会修改 Button 的 Style,比如一个自定义的 Close 按钮.刚入门的可能会用一张 PNG 格式的图片来做这个按钮的 Icon,但这个是不优雅的.而且你要改的时候还得去操作 ...
- ACdream 1112 Alice and Bob (sg函数的变形+素数筛)
题意:有N个数,Alice 和 Bob 轮流对这些数进行操作,若一个数 n=a*b且a>1,b>1,可以将该数变成 a 和 b 两个数: 或者可以减少为a或b,Alice先,问谁能赢 思路 ...
- 微信小程序省市联动
最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下: 首先呢,来看看效果,点击文字'点击',弹出选择窗口,点击取消或者确定(取消.确定按钮在选择框上边,截图有些不清 ...
- webscoket实战之利用httpsession定向推送
webscoket实战之利用httpsession定向推送 开发框架 springboot 场景 在利用websocket主动推送信息给客户端的过程中,经常会遇到一个普遍需求,就是推送的消息要定向推送 ...
- 初探CSRF在ASP.NET Core中的处理方式
前言 前几天,有个朋友问我关于AntiForgeryToken问题,由于对这一块的理解也并不深入,所以就去研究了一番,梳理了一下. 在梳理之前,还需要简单了解一下背景知识. AntiForgeryTo ...
- 每天一个linux命令(63):Linux中zip压缩和unzip解压缩命令详解
文章转自:http://www.jb51.net/LINUXjishu/105916.html 1.把/home目录下面的mydata目录压缩为mydata.zipzip -r mydata.zip ...
- Spark SQL数据加载和保存实战
一:前置知识详解: Spark SQL重要是操作DataFrame,DataFrame本身提供了save和load的操作, Load:可以创建DataFrame, Save:把DataFrame中的数 ...
- java集合框架(hashSet自定义元素是否相同,重写hashCode和equals方法)
/*HashSet 基本操作 * --set:元素是无序的,存入和取出顺序不一致,元素不可以重复 * (通过哈希值来判断是否是同一个对象) * ----HashSet:底层数据结构是哈希表, * 保证 ...
- Java命名默认规范
学习java的时候,命名的大小写经常弄混,所以在此总结一下java命名规范 1.project(项目名) 说法不一,暂定小写,eg:arraytest 2.包名 小写,eg:package array ...
- 2017-4-26 winform 菜单和工具栏
如何让radiobutton进行分组: 用Panel 相当于div 菜单和工具栏: MenuStrip(菜单条) ShortcutKeys-------------------------与菜单 ...