在添加新列后使用jQuery DataTable进行列搜索,可以按照以下步骤进行操作:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<!-- 新添加的列 -->
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
<!-- 其他行数据 -->
</tbody>
</table>
$(document).ready(function() {
var table = $('#myTable').DataTable();
// 启用列搜索
table.columns().every(function() {
var column = this;
$('input', this.header()).on('keyup change', function() {
if (column.search() !== this.value) {
column.search(this.value).draw();
}
});
});
});
这是一个基本的使用jQuery DataTable进行列搜索的示例。你可以根据实际需求进行定制和扩展。如果你想了解更多关于jQuery DataTable的功能和用法,可以参考腾讯云的相关产品和文档:
请注意,以上答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,以符合要求。
领取专属 10元无门槛券
手把手带您无忧上云