zoukankan      html  css  js  c++  java
  • 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'}
                            
                          ]
              }
                       
  • 相关阅读:
    清明节实现所有网页变灰色
    点击按钮,复制文本
    Matlab笔记
    spring框架中配置mysql8.0需要注意的地方(转载)
    移动吉比特H2-2光猫超级用户与密码
    JS关闭chorme页面
    MATLAB利用solve函数解多元一次方程组
    微信聊天记录导出为csv,并生成词云图
    fmt.Sprintf(格式化输出)
    iris,context源码分析
  • 原文地址:https://www.cnblogs.com/daixinyu/p/6866516.html
Copyright © 2011-2022 走看看