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

最新推荐文章于 2021-10-21 11:21:07 发布

MelodyFreedom

最新推荐文章于 2021-10-21 11:21:07 发布

阅读量1w

点赞数

本文链接：https://blog.csdn.net/MelodyFreedom/article/details/51545119

版权

这篇博客介绍了如何在Datatable中实现动态列隐藏功能，包括CSS样式、添加按钮事件、过滤列显示以及处理按钮点击事件的方法。通过示例代码展示了如何在表格中添加隐藏/显示列的按钮，并根据用户选择动态调整列的可见性。

摘要由CSDN通过智能技术生成

以下参照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>