如何解决Datatable JS searchPanes显示/隐藏列的过滤器
我使用库数据表，并使用过滤窗格，与此相关的问题。
所以问题是，我想选择要过滤的列，现在脚本是从第2、3、4列自动创建过滤，但是我想从列中过滤 0,1,3,4 。
我该如何解决？
代码：
$(document).ready(function () {
$('#stationTypesList').DataTable({
searchPanes: {
layout: 'columns-4',},dom: 'Pfrtip',});
});
解决方法
Documentation关于隐藏/显示搜索窗格。
这是一个有效的示例：
$('#stationTypesList').DataTable({
searchPanes: true,dom: 'Pfrtip',columnDefs:[
{
searchPanes:{
show: false,// It can be true/false
},targets: [0,1,2,3,4,5],// Index of columns (starting at 0) that you want show/hide
}
]
});
结果：
所有要测试的HTML代码：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" ></script>
<script src="https://cdn.datatables.net/searchpanes/1.1.1/js/dataTables.searchPanes.min.js" ></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js" ></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/searchpanes/1.1.1/css/searchPanes.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
</head>
<body>
<table id="stationTypesList">
<thead>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
<th>Test 4</th>
<th>Test 5</th>
<th>Test 6</th>
<th>Test 7</th>
<th>Test 8</th>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr><tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr><tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr><tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr><tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr><tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
$('#stationTypesList').DataTable({
searchPanes: true,},}
]
});
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
