• 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'}
                            
                          ]
              }
                       
  • 相关阅读:
    开启ecstore隐藏的功能
    对接ECOS框架(含ecstore、ocs、erp等产品)的方法【其他系统请求ecos的api接口】
    shopex 网店系统基于云登录系统的信任登录设置
    怎样获取机器码
    windows 无法连接远程桌面
    ecos框架中data/ 目录下img*文件数量过多的问题
    mac 下brew解决php安装问题
    20140708 总结
    20140705 总结
    bzoj 2751
  • 原文地址:https://www.cnblogs.com/daixinyu/p/6866516.html
Copyright © 2020-2023  润新知