在jQuery数据表中使用多列过滤器可以通过以下步骤实现:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="dataTables.min.js"></script>
<link rel="stylesheet" href="dataTables.min.css">
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>London</td>
</tr>
<!-- 其他行数据 -->
</tbody>
</table>
$(document).ready(function() {
$('#myTable').DataTable();
});
$(document).ready(function() {
$('#myTable').DataTable({
"searchCols": [
null,
null,
{ "search": "London" } // 在第三列中过滤出"London"
]
});
});
上述代码中,searchCols
选项用于指定每一列的过滤条件。在这个例子中,第三列的过滤条件为"London",即只显示城市为"London"的行数据。
<input type="text" id="nameFilter" placeholder="Name">
<button id="filterButton">Filter</button>
然后,在初始化方法中添加以下代码:
$(document).ready(function() {
var table = $('#myTable').DataTable();
$('#filterButton').on('click', function() {
var nameFilterValue = $('#nameFilter').val();
table.column(0).search(nameFilterValue).draw();
});
});
上述代码中,column(0)
表示第一列,search()
方法用于设置过滤条件,draw()
方法用于重新绘制数据表,以显示符合过滤条件的行数据。
这样,当用户在文本框中输入姓名并点击按钮时,数据表将根据姓名进行过滤,并显示符合条件的行数据。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。
领取专属 10元无门槛券
手把手带您无忧上云