从文本框中删除自动搜索并搜索搜索按钮

Question

我正在使用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>

Answer 1

没有理由添加新搜索<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);
    }            
})  

演示 - > http://jsfiddle.net/zuv05qbj/

Answer 2

与 davids 惊人的答案一样，您还可以绑定 ENTER 键来执行搜索，方法是在按下搜索按钮时调用单击事件：

initComplete : function() {
    var self = this.api();
    var filter_input = $('#'+settings.nTableWrapper.id+' .dataTables_filter input').unbind();
    var search_button = $('<button type="button">Search</button>').click(function() {
        self.search(filter_input.val()).draw();
    });
    var clear_button = $('<button type="button">Clear</button>').click(function() {
        filter_input.val('');
        search_button.click();
    });

    $(document).keypress(function (event) {
        if (event.which == 13) {
            search_button.click();
        }
    });

    $('#'+settings.nTableWrapper.id+' .dataTables_filter').append(search_button, clear_button);
}

如果页面上也有多个数据表，则可以使用:)（注意 的使用settings.nTableWrapper.id）