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