数据表js searchPanes显示/隐藏列的过滤器
数据表js searchPanes显示/隐藏列的过滤器
提问于 2020-09-18 08:39:36
我使用库数据表，并使用筛选窗格，在这方面我有问题。
所以问题是，我想选择我要过滤的列，因为现在脚本是从列2,3,4自动创建过滤，但是我希望从列0、1、3、4中过滤。
我怎么能解决呢？
代码：
$(document).ready(function () {
$('#stationTypesList').DataTable({
searchPanes: {
layout: 'columns-4',
},
dom: 'Pfrtip',
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-18 11:26:29
关于隐藏/显示搜索窗格的文档。
，下面是一个有用的示例：
$('#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,
dom: 'Pfrtip',
columnDefs:[
{
searchPanes:{
show: false,
},
targets: [0,1,2,3,4,5],
}
]
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63952218
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号