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‘}

                      ]
          }
                   
时间: 2024-11-06 07:15:28

Jquery datatable 动态隐藏列(根据有无值)的相关文章

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

处理思路: 1.打开excel 用NPOI进行读取: 2.读取第一个Sheet: 读取过程中: a.先设置相应列 不隐藏 b.读取Cell时 先判断是否的包含公式 相应代码如下: public static DataTable ReadDataFromExcelByNPOI() { DataTable dt = new DataTable(); var filePathAndName = Path.Combine(Server.MapPath("~/Content/Excel"), &

获取DataTable某一列的所有值

/// <summary>/// 获取某一列的所有值/// </summary>/// <typeparam name="T">列数据类型</typeparam>/// <param name="dtSource">数据表</param>/// <param name="filedName">列名</param>/// <returns>&

SAP ABAP编程 Table Control动态隐藏列

在SAP DIALOG设计中,有时候需要动态的隐藏某些列,下面是方法. ***数据定义 CONTROLS: table_control TYPE TABLEVIEW USING SCREEN 0100.    "Table Control名称 DATA: l_col LIKE LINE OF table_control-cols.                                               "定义Table Control 列 ***在PBO中 PROC

extjs3.x 动态隐藏列头的做法

qGridPanel.addListener('rowclick',function(){ var record = qGridPanel.getSelectionModel().getSelected(); ffGridStore.removeAll(); ffGridStore.baseParams = { 'classid' : escape(record.data.classid), 'studentcode' : escape(record.data.studentcode), 'co

DataGridView绑定DataTable动态生成列 并且将列名中文显示

方法一: DataGridView绑定获取到的DataTable数据,然后根据每一列手动设置列名,如图 方法二: 在写SQL查询语句的时候,直接在select后边的字段上 AS 想要显示的中文名称即可;如图

jquery datatable显示隐藏子表

<table id="parentTable"> <thead> <tr> <th></th> <th>Values</th> <th>Number</th> <th>Other</th> </tr> </thead> <tbody> <tr> <td><span class='expand

treegrid 动态隐藏列

function getShorMonths(){    var d = new Date();    var str = d.getFullYear()+"-"+(d.getMonth()+1);    var arr=["2018-12","2018-11","2018-10","2018-09","2018-08","2018-07","2018-06

girdView隐藏列

gridview隐藏列, 并能读取列值的解决方法. 首先 是用datakeynames 来解决 在设计数据库的时候 ,,我这里 aa 为主键. 前台 代码 1 <asp:GridView ID="GridView1" runat="server" AllowPaging="True" Width="798px" DataKeyNames ="aa">2 <Columns>3 <

datatable隐藏列设置及获取隐藏列的值

"columns": [ { "data": "name" }, { "data": "password" }, { defaultContent: '<td class="caozuo">'+ <span class="lookup">查看</span> '+ '<span class="modify"&