一、场景

前端利用datatable初始化的时候会向后端调用数据，需求是要动态的使某一列根据传回来的一个标志位是否有值来决定显示与否

这是当前传回值有活动优惠幅度的情况下:

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

可以发现【活动优惠幅度】这一列都被隐藏了

二、实现方法及原理

1、实现过程：

<table id="table"><thead><tr><th>x1</th><th>x2</th><th>x3</th><th>x4</th><th>x5</th><th>x6</th><th>x7</th><th>x8</th></tr><thead><tbody></tbody>
</table>

js片段，注意在fnDrawCallback事件中获取数据，根据数据的某些属性控制列（通过class）的显示。

不能在initComplete中控制列的属性，翻页失效且第二次加载数据时无法触发。

table = $('#table').DataTable({serverSide: true,ajax:{type:"post",url:"xx",data:function(){},columns:[{"data":'x1',"sclass":"c1"},{"data":'x2',"sclass":"c1"},{"data":'x3',"sclass":"c1"},{"data":'x4',"sclass":"c1"},{"data":'x5',"sclass":"c2"},{"data":'x6',"sclass":"c2"},{"data":'x7',"sclass":"c2"},{"data":'x8',"sclass":"c2"},],
"fnDrawCallback": function(oSettings){//获取后台方式 直接可以拿到json 之后进行处理var json=jQuery.parseJSON(oSettings.jqXHR.responseText);var data = json.data;if(data.length>0){var tmp = data[0].x1;if(tmp == ""||tmp == undefined){$(".c1").css("display","none");}else{$(".c2").css("display","none");}}}}
})

在initComplete中如下：

在 "columns":[] 的当前列之中如 {orderable: false,sClass:"text-center 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'}]}

参考：https://www.cnblogs.com/daixinyu/p/6866516.html

Jquery datatable 动态隐藏列（根据有无值）相关推荐

easyPoi 注解导出动态隐藏列
easyPoi 注解导出动态隐藏列 1.先写个poi工具类 /*** 动态显示Excel导出列* @param <T>*/ public class EasyPoiUtil<T&g ...
element table v-for动态隐藏列
element table v-for动态隐藏列这个动态列是我项目中觉得比较好玩的一个功能,他列表不固定,后端数据库表也不固定,其实还有个高级筛选,这两个是配套使用的, <el-tablere ...
NPOI 读取excel到DataTable 读取隐藏列读取公式列
处理思路: 1.打开excel 用NPOI进行读取: 2.读取第一个Sheet: 读取过程中: a.先设置相应列不隐藏 b.读取Cell时先判断是否的包含公式相应代码如下: public sta ...
Gridview隐藏列和隐藏列的取值问题
总结一下Gridview隐藏列的问题,下面说两种方法: 就是直接让你得到的数据表里面的那一列不给他绑定值.确保你Table里面包含这列数据,比如把你要查询出来两列:name:id,你 ...
kendo ui 动态隐藏列_kendoUI动态改变grid复选框变单选框
最近遇到一个需求需要动态把grid复选框列变成单选框,先上复选grid代码复选grid 代码效果查询了kendoUI的官方文档得到解释官方文档查询大佬们博客发现: selectable :Bo ...
datatable 动态显示/隐藏列
这个例子演示了 column().visible()方法来隐藏显示列,通过点击列按钮动态切换 <table id="example" class="display& ...
JQuery EasyUI 动态隐藏
一.隐藏datagrid某一列 $('#dg').datagrid('hideColumn', 'field'); 二.隐藏html的lable.input标签 1 <td align=&quo ...
Jquery DataTable控制显示列，导出EXCEL
1.初始化 var table = $('#table').DataTable({"data": data[0].DATA,"columns": data[0] ...
kendo ui 动态隐藏列_Kendo UI使用教程：Kendo UI Grid中的动态数据（一）
本教程将为大家介绍如何逐步创建具有动态数据的Kendo UI grids.当您在一遍又一遍输入相同代码时,可以知道有些是可以关闭的,您输入的代码正在获取WET.创建具有动态数据的可编辑Kendo UI ...

Jquery datatable 动态隐藏列（根据有无值）

一、场景

二、实现方法及原理

1、实现过程：

Jquery datatable 动态隐藏列（根据有无值）相关推荐

最新文章

热门文章