我正在使用jQuery数据表,我试图弄清楚如何从“搜索按钮”进行搜索搜索,而不是从文本框中自动搜索.
我正在编写一个单页应用程序,因此有多个提交按钮使这很困难,因为我只希望它从该特定搜索按钮搜索而不是在提交时触发其他提交按钮.
我用Google搜索,结果都没有成功.如何在提交搜索按钮时从输入中获取值,以便正确调整数据表.
然后我希望搜索按钮更改文本以退出搜索以将数据表恢复到正常状态,就像您只是从文本框中删除文本一样.任何有关这方面的帮助将不胜感激.
JS
// Search Mode allows to search tables
$("#Search").on("click",function(){
$("#ItemID").prop("disabled",false);
$("#ESearch").show();
$("#Search").hide();
// Allows ItemID to search through database
$('#ItemID').keyup(function(){
oTable.search($(this).val()).draw() ;
});
});
// Exit out of EXIT SEARCH mode
$("#ESearch").on("click",function(){
$("#ItemID").val("");
$("#ItemID").prop("disabled",true);
$("#Search").show();
$("#ESearch").hide();
});
HTML
<input type="text" class="form-control" name="ItemID" id="ItemID" maxlength="15"> <span class="input-group-btn"> <button type="button" class="btn btn-default" id="Search">SEARCH</button> <button style="display:none;" type="button" class="btn btn-default" id="ESearch">EXIT SEARCH</button> </span>
解决方法
没有理由添加新的搜索< input>,您可以重复使用默认值.以下代码重置默认搜索/过滤,当您键入默认的< input>时框,然后添加两个按钮,在单击时执行/清除搜索/过滤.
var table = $('#example').DataTable({
initComplete : function() {
var input = $('.dataTables_filter input').unbind(),self = this.api(),$searchButton = $('<button>')
.text('search')
.click(function() {
self.search(input.val()).draw();
}),$clearButton = $('<button>')
.text('clear')
.click(function() {
input.val('');
$searchButton.click();
})
$('.dataTables_filter').append($searchButton,$clearButton);
}
})
