要取消仅对所有表列进行排序,同时保持Jquery Bootstrap4数据表中的搜索框不变,可以按照以下步骤进行操作:
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th data-sortable="false">列1</th>
<th data-sortable="false">列2</th>
<th data-sortable="false">列3</th>
<th data-sortable="false">列4</th>
</tr>
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
</table>
<input type="text" id="searchInput" placeholder="搜索...">
$(document).ready(function() {
// 初始化数据表格
$('#myTable').DataTable({
ordering: false, // 取消排序功能
searching: true, // 保持搜索框可用
});
// 监听搜索框输入事件
$('#searchInput').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('#myTable tbody tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
在上述代码中,我们使用了DataTable()
方法来初始化数据表格,并通过ordering: false
来取消对所有表列的排序功能。同时,我们使用了keyup
事件来监听搜索框的输入,并根据输入的值来筛选表格中的内容。
以上就是取消仅对所有表列进行排序,同时保持Jquery Bootstrap4数据表中的搜索框不变的操作步骤。如果你需要了解更多关于Jquery和Bootstrap的相关知识,可以参考腾讯云的相关产品和文档:
领取专属 10元无门槛券
手把手带您无忧上云