datatable的动态列隐藏按钮及实现方式
以下参照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、添加按钮事件
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 ' + '" 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 '';
}
}
}
}, {
"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 '';
}
}, {
"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+ " ";
}
}
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 = '显示/隐藏列';
for (var i = 1; i < columJson.length; i++){
if(columJson[i].bVisible){
var stitle = columJson[i].sTitle;
insertHtml += '
}
}
insertHtml +='
$('.showColumn').html(insertHtml);
}
4、对按钮点击事件的处理。
//隐藏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());
});