<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style/css/jquery.dataTables.min.css">
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.exampleBox {
padding: 120px;
}
.dataTables_length, .dataTables_filter {
display: none;
}
.dropdown-menu {
top: unset;
left: 120px;
padding: 10px;
}
.dropdown-menu li:hover, .dropdown-menu li:hover input, .dropdown-menu li:hover label {
cursor: pointer
}
</style>
</head>
<body>
<div id="exampleBox" class="exampleBox">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-th icon-th"></i>
<span class="caret"></span>自定义列
</button>
<ul class="dropdown-menu" role="menu">
<li data-column="0"><label>
<input data-column="0" type="checkbox" data-field="Name" checked="checked" disabled> 姓名</label></li>
<li data-column="1"><label>
<input data-column="1" type="checkbox" data-field="Position" checked="checked" disabled>地址</label></li>
<li data-column="2">
<label><input type="checkbox" data-field="Office" data-column="2">办公室</label></li>
<li data-column="3"><label>
<input type="checkbox" data-field="Age" data-column="3" checked="checked"> 年龄</label></li>
<li data-column="4"><label>
<input data-column="4" type="checkbox" data-field="StartDate">日期</label>
</li>
<li data-column="5"><label>
<input data-column="5" type="checkbox" data-field="Salary" checked="checked"> Salary</label>
</li>
</ul>
<table id="example" class="display">
<thead>
<tr>
<th>姓名</th>
<th>地址</th>
<th>办公室</th>
<th>年龄</th>
<th>日期</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
</tbody>
</table>
</div>
<script>
$('#example').DataTable({
"columnDefs": [
{
"targets": [2,4], // 默认隐藏的列：下标为2和4
"visible": false,
}
]
});
function hidColumn(jTable, colNum) {
let column = jTable.column(colNum);
column.visible(!column.visible());
}
$("#exampleBox .dropdown-menu").find("li").click(function (e) {
let val = $(this).find("input").prop("checked");
if (val == true) {
hidColumn($('#example').DataTable(), $(this).attr('data-column'));
} else {
hidColumn($('#example').DataTable(), $(this).attr('data-column'));
}
$(this).find("input").prop("checked", !val);
//阻止事件冒泡 目的是不使下拉列表隐藏，若是不加这句话就会每点击一行，下拉列表就隐藏咯
e.stopPropagation();
})
$("#exampleBox .dropdown-menu").find("input").click(function (e) {
e.stopPropagation();
let val = $(this).prop("checked");
if (val == true) {
hidColumn($('#example').DataTable(), $(this).attr('data-column'));
} else {
hidColumn($('#example').DataTable(), $(this).attr('data-column'));
}
})
$("#exampleBox .dropdown-menu").find("label").click(function (e) {
e.stopPropagation();
let val = $(this).siblings("input").prop("checked");
if (val == true) {
hidColumn($('#example').DataTable(), $(this).siblings("input").attr('data-column'));
} else {
hidColumn($('#example').DataTable(), $(this).siblings("input").attr('data-column'));
}
})
</script>
</body>
</html>
注意：
1、至少保证两列是一定显示的，否则点击切换的时候有可能乱套。
2、columnDefs字段可默认隐藏列，但是注意对应的下拉选项要设置未选中，否则也乱套的。
"columnDefs": [
{
"targets": [2,4], // 默认隐藏的列：下标为2和4
"visible": false,
}
]
实现效果：
