我想知道是否可能将由 DataTables
修改的表格中的搜索功能移出到一个 input
之外。目前,我有一个自定义输入框来执行此功能:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchNameField').keyup(function () {
oTable.search($(this).val()).draw();
});
})
</script>
输入看起来像这样:
<label for="searchNameField" class="col col-form-label">Name:</label>
<div class="col-sm-11">
<input type="text" class="form-control ml-0 pl-2" id="searchNameField"
placeholder="Name" autofocus/>
</div>
我希望的是将这个功能移动到一个按钮上。我认为可能的方法如下:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($(this).val()).draw();
});
})
</script>
按钮的样式如下:
<button id="searchButton" type="button" class="btn btn-sm btn-success" style="width: 150px">
<i class="fa fa-search">
Search
</i>
</button>
然而,当我点击按钮时,它并不起作用。在撰写这个问题的过程中,我意识到这可能是因为当我点击按钮时,它不知道从哪里获取筛选文本以实际过滤表格。
有没有办法让按钮单击引用输入,然后去过滤表格?
#searchNameField
中时,有没有一种方法可以使用回车键来触发此函数? - CBreeze