码迷,mamicode.com
首页 > Web开发 > 详细

Jquery datatable 动态隐藏列(根据有无值)

时间:2017-05-17 14:17:32      阅读:790      评论:0      收藏:0      [点我收藏+]

标签:控制   als   data   set   .com   pre   标志位   else   前端   

一场景

前端利用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 动态隐藏列(根据有无值)

标签:控制   als   data   set   .com   pre   标志位   else   前端   

原文地址:http://www.cnblogs.com/daixinyu/p/6866516.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!