datatable的动态列隐藏按钮及实现方式

原创 2016年05月31日 13:57:55

以下参照datatable中文网api中的例子编写而成。

其中用到的css如下:

.showColumn{
position:relative;
display:inline-block;
z-index:9999;
height:100%;
padding-left:0px;
}
.showColumn  .margin-comm.span-btn{
height:23px;
vertical-align:middle;
display:inline-block;
}
.showColumn .showul{
list-style:none;
display:none;
position:absolute;
left:6px; 
border:1px solid #ccc;
}
.showul ul li{
  width: 115px;
  height: 23px;
  border: 0;
  background: #666464;
}
.showul ul li:hover{
  background: #eef9f9;
  cursor: pointer;
}
.showul ul li input{
  margin-left: 5px;
  vertical-align: middle;
}


1、添加按钮事件

        <div class="showColumn"  style="position:relative;display:inline-block;z-index:9999;height:100%;padding-left:0px;">
                         <!--<span class="margin-comm icon-set" style="width:20px;margin-top:5px;height:20px;vertical-align:middle;display:inline-block;" ></span>
                     <div class="showul" style="list-style:none;display:none; position:absolute;left:6px; border:1px solid #ccc; ">
                      <ul>
                            <!--  <li><input type="checkbox" class="toggle-vis" data-column="2">服务器名称</li>
     <li><input type="checkbox" class="toggle-vis" data-column="3">IP</li>
     <li><input type="checkbox" class="toggle-vis" data-column="4">CPU/内存</li>
     <li><input type="checkbox" class="toggle-vis" data-column="5">数据盘大小</li>
     <li><input type="checkbox" class="toggle-vis" data-column="6">操作系统</li>
     <li><input type="checkbox" class="toggle-vis" data-column="7">状态</li> -->
                        </ul>
                     </div> -->
                        </div> 

2、编写对列的过滤,其中隐藏的列不显示在是否隐藏的菜单中,项目中使用的列使用json数据写好的,方便起见,直接粘贴过来了。

    var contentcolumns = [{
        "sTitle": "选择",
        "sClass": "center",
        "bSortable" : false, // 不排序
        "bVisible": true,
        "render": function (data, type, row) {
            if (type == "display") {
                var location = row.cplLocation;
                var cplServer = row.cplServer;
                var ftp = "",audits = "";
                //所在片库
                if (location.length > 0) {
                    for (var i = 0, len=location.length; i < len; i++) {
                        var flag = i==len-1?"":",";
                        ftp += location[i].ftp.ftpName +flag;
                    }
                }
                //所在影厅
                if(cplServer.length > 0){
                    for (var i = 0,len=cplServer.length; i < len; i++) {
                        var flag = i==len-1?"":",";
                        audits += cplServer[i].number + flag;
                    }
                }
                return '<input type="checkbox" uuid="' + row.UUID  + '" oFtp="'+JSON.stringify(location).replace(/\"/g,"'")
                    + '" audits="'+audits+'" ftp="' + ftp + '" noexitnumber="' + row.noExitNumber + '" cplTitle="' + row.contentTitleText +'">';
            } else {
                return row;
            }
        },
    }, {
        "sTitle": "状态",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : false, // 不排序
        "bVisible": true,
        "render":function(data, type, row){
            if(type == "display"){
                var usedBySPL = row.usedBySPL;
                if(usedBySPL){
                return '<i class="is-has-playlist"></i>';
                }
            }
        }
    }, {
        "sTitle": "加密",
        "sClass": "center",
        "sDefaultContent": "" ,
        "mData":"requiredKdm",
        "bSortable" : false, // 不排序
        "bVisible": true,
        "render":function(data, type, row){
            if(type == "display"){
                return cplIsRequiredKdm(data);
            }
        }
    }, {
        "sTitle": "格式",
        "sClass": "center",
        "sDefaultContent": "",
        "bSearchable": true,
        "mData": "stereoscopic",
        "bSortable" : false, // 不排序
        "bVisible": true,
        "render":function(data, type, row){
            return '<i class="film-'+data.replace(/\D/,"d")+'"></i>';
        }
    }, {
        "sTitle": "标题",
        "sClass": "center",
        "sDefaultContent": "",
        "sWidth":"300px",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "contentTitleText"
    }, {
        "sTitle": "属性",
        "sClass": "center",
        "mData": "attribute",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": false,
    }, {
        "sTitle": "备注标题",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "attachedTitle"
    }, {
        "sTitle": "类型",
        "sClass": "center",
        "sDefaultContent": "",
        "bSearchable": true,
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "contentKind"
    }, {
        "sTitle": "创建日期",
        "sClass": "center",
        "mData": "issueDate",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": false,
    }, {
        "sTitle": "时长",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "duration"
    }, {
        "sTitle": "结束时间",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "endPoint"
    }, {
        "sTitle": "通道",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "macroCaption",
    }, {
        "sTitle": "音量",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": false,
        "mData": "volume"
    }, {
        "sClass": "center",
        "sTitle": "所属片库",
        "mData": "cplLocation[0].ftp.ftpName",
        "sDefaultContent": "null",
        "bSortable" : true, // 排序
        "bVisible": false,
        "render": function (data, type, row) {
            if (data) {
                return data.replace(/0/g, ' ');
            }
        }
    }, {
        "sClass": "center",
        "mData": "cplServer[0].number",
        "sTitle": "所属影厅",
        "sDefaultContent": "null",
        "bVisible": false,
        "bSortable" : true, // 排序
        "render": function (data, type, row) {
            if(type == "display"){
                var cplServer =row.cplServer,
                    audits = "";
                if(cplServer.length > 0){
                    for (var i = 0; i < cplServer.length; i++) {
                        audits += cplServer[i].number+ "&nbsp;";
                    }
                }
                return audits;
            }else{
                return data;
            }
        }
    }, {
        "sClass": "center",
        "mData": "UUID",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": false,
    }, {
        "sTitle": "上传时间",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "uploadTime",
        "render":function(data, type, row){
        return data.replace("T"," ");
        }
    }];


3、写个公用方法,对其中列的表头的文字过滤出来,将表头的文字放在按钮点击出来的框中,以下方法的调用时再datatable绘成以后的回调函数中调用,其中的参数是表的列的json数组。

//的回调函数中使用的动态改变列的方法
function cloumsTitle(columJson){
    var insertHtml = '<span class="margin-comm span-btn"><i class="icon-set"></i>显示/隐藏列</span><div class="showul"><ul>';
    for (var i = 1; i < columJson.length; i++){
        if(columJson[i].bVisible){
            var stitle =  columJson[i].sTitle;
            insertHtml += '<li><input type="checkbox" class="toggle-vis" checked=checked data-column="'+i+'"><span style="margin-left:5px;width:30px;overflow:hidden;text-overflow:ellipsis;line-height:23px;">'+stitle+'</span></li>';
        }
    }
    insertHtml +='</ul></div>'; 
    $('.showColumn').html(insertHtml);
}

4、对按钮点击事件的处理。

//隐藏table列的方法

//如果当前的这个弹出框在,就隐藏,否则相反。

//隐藏table列的方法
$(document).on('click', '.showColumn', function(e){
    e.stopPropagation();
    if($('.showul').hide()){
        $('.showul').show();
    } else{
        $('.showul').hide();
    }
 });
//隐藏table列的方法,在选项外点击,打开的选项收起来
$(document).click(function(e) {
    if (!$(e.target).is(".showColumn") && !$(e.target).is(".showul")) {
        $('.showul').hide();
    }
});


5、datatable定义完毕以后,用以下代码实现对datatable表列的隐藏或出现。

 $('.toggle-vis').on('change',function(e){
            e.preventDefault();
            var column = table.api().column($(this).attr('data-column'));
            column.visible(!column.visible());
        });

相关文章推荐

datatable 隐藏列注意事项

stateSave : true, // 保存状态     这个会使得隐藏列失效                                                visib...
  • zwhfyy
  • zwhfyy
  • 2016年08月23日 09:46
  • 2480

DataTable学习笔记---排序细则、列隐藏

转载出处:http://www.cnblogs.com/tonylp/archive/2013/03/07/2947585.html  1.DataTable排序              1...

jquery.dataTables表格列 动态显示隐藏(加工) checkbox刷新保持不变

这篇博客参考这位大神的: jquery.dataTables表格列动态显示隐藏封装(二).      项目中使用到了datatalbes用来展示表格的数据,还有bootstrap框架用来点击弹出下拉的...

动态插入DataTable一列

DataTable中的columns为DataColumn的对象集,即DataColumnCollection,但是没有提供insert方法,让人没有想到,项目进行到目前的状态正好需要这个东西,咋办…...
  • snlei
  • snlei
  • 2009年12月25日 13:41
  • 3696

dataTable 加载展示 以及刷新数据

使用dataTables展示数据,需求需要添加日期选择和分类筛选。表格footer显示统计数据。差额数据直接在列表中隐藏,获取var table; var total; $(function() { ...

datatables动态添加隐藏行

开发的是订单管理页面,要实现功能,用户查看订单列表,单击详情时从后台取到该订单内的所有商品并胴体展示在表格行内,比较实用的一个内容。 未展开前如上图。 展开后如上图。 html部分...

DataTable中隐藏列栏位

DataTable dt = new DataTable(); dt.Columns.Remove("p_o");

判断某个列名是否在DataTable中存在的例子

 使用 DataTable.Columns.Contains方法可以判断某个列名是否存在于某个DataTable中            DataTable t = new DataTable(); ...
  • eaglet
  • eaglet
  • 2007年08月17日 23:09
  • 13437

jquery.dataTables表格列动态显示隐藏封装(二)

jquery.dataTables 列动态显示隐藏

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

"columns": [ { "data": "name" }, { "data": "password" }, ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:datatable的动态列隐藏按钮及实现方式
举报原因:
原因补充:

(最多只允许输入30个字)