一场景:

前端利用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 动态隐藏列(根据有无值)的更多相关文章

  1. NPOI 读取excel到DataTable 读取隐藏列 读取公式列

    处理思路: 1.打开excel 用NPOI进行读取: 2.读取第一个Sheet: 读取过程中: a.先设置相应列 不隐藏 b.读取Cell时 先判断是否的包含公式 相应代码如下: public sta ...

  2. SAP ABAP编程 Table Control动态隐藏列

    在SAP DIALOG设计中,有时候须要动态的隐藏某些列,以下是方法. ***数据定义 CONTROLS: table_control TYPE TABLEVIEW USING SCREEN 0100 ...

  3. 获取DataTable某一列的所有值

    /// <summary> /// 获取某一列的所有值 /// </summary> /// <typeparam name="T">列数据类型 ...

  4. datatable 动态显示/隐藏列

    这个例子演示了 column().visible()方法来隐藏显示列,通过点击列按钮动态切换 <table id="example" class="display& ...

  5. jquery grid 显示隐藏列

    colModel: [ { label: '列名称', name: 'columnName', width: 100, align: 'left' } ] function showData() { ...

  6. Jquery DataTable控制显示列,导出EXCEL

    1.初始化 var table = $('#table').DataTable({ "data": data[0].DATA, "columns": data[ ...

  7. 使用JQuery,动态增加列

    这也是我在自己学做网站时无意搞出来的,希望可以对别人有所启发 <%@ page language="java" import="java.util.*" ...

  8. jquery datatable显示隐藏子表

    <table id="parentTable">     <thead>         <tr>             <th> ...

  9. ASP.new GridView获取隐藏列值的几种方法

    解决方法: 原文来自:http://www.tzwhx.com/NewShow/newBodyShow/控件_32933.html 作者:lerit  1.隐藏列前获取数据 看这样一个例子(以下均以此 ...

随机推荐

  1. 01.Nodejs入门之Helloworld

    说明:本文章可供有一定js基础的朋友参考nodejs入门,本文未讲解nodejs的安装,如有需要的同学可以加QQ3382260752找我,进行交流学习. 1.新建文件夹helloworld demo, ...

  2. 如何使用LightningChart拖放功能进行数据转移 ?

    本文主要介绍如何使用LightningChart扩展拖放功能为所有图表组件创建图表,如:系列,标题,轴线等等.支持用鼠标放置自定义对象到另一个图表中,如:可以添加或修改JSON/CSV或其他格式的数据 ...

  3. 6.Java集合总结系列:常见集合类的使用(List/Set/Map)

    MARK 总结: Set.List 和 Map 可以看做集合的三大类. List集合是有序集合,集合中的元素可以重复,访问集合中的元素可以根据元素的索引来访问. Set集合是无序集合,集合中的元素不可 ...

  4. poj 2369 Permutations (置换入门)

    题意:给你一堆无序的数列p,求k,使得p^k=p 思路:利用置换的性质,先找出所有的循环,然后循环中元素的个数的lcm就是答案 代码: #include <cstdio> #include ...

  5. mock.js-无需等待,随机产生数据,让前端独立于后端进行开发

    mock.js所做的 基于 数据模板 生成模拟数据. 基于 HTML模板 生成模拟数据. 拦截并模拟 ajax 请求. Mock.js官方网址:http://mockjs.com/ 1.Mock.js ...

  6. ML(4): NavieBayes在R中的应用

    朴素贝叶斯方法是一种使用先验概率去计算后验概率的方法, 具体见上一节. 算法包:e1071 函数:navieBayes(formule,data,laplace=0,...,subset,na.act ...

  7. 跟着刚哥梳理java知识点——数组(七)

    数组:数组是多个相同类型数据类型的集合,实现对这些数据的统一管理. 元素:数组中的元素可以是任何数据类型,包括基本数据类型和引用类型. 特点:属于引用类型,数组型数据是对象object,数组中的每个元 ...

  8. Jquery Validation 验证控件的使用说明

    转载自:http://blog.csdn.net/huang100qi/article/details/52453970,做了一些简化及修改 下载地址:https://jqueryvalidation ...

  9. 在Oracle中添加用户登录名称

    第一步,打开Oracle客户端单击 “帮助”-->"支持信息"-->”TNS名“,加入红色部分.页面如下: 第二步,再次打开Oracle客户端时,就会显示数据库了,只需 ...

  10. 探讨数据进行AES加密和解密以及.NET Core对加密和解密为我们提供了什么?

    前言 对于数据加密和解密每次我都是从网上拷贝一份,无需有太多了解,由于在.net core中对加密和解密目前全部是统一了接口,只是做具体的实现,由于遇到过问题,所以将打算基本了解下其原理,知其然足矣, ...