Question

我正在使用jQuery数据表，我正试图弄清楚如何从＆＃34;搜索按钮＆＃34;而不是自动从文本框中。

我正在编写一个单页应用程序，因此有多个提交按钮使这很困难，因为我只希望它从该特定搜索按钮搜索而不是在提交时触发其他提交按钮。

我用谷歌搜索，结果都没有成功。如何在提交搜索按钮时从输入中获取值，以便正确调整数据表。

然后我希望搜索按钮更改文本以退出搜索以将数据表恢复到正常状态，就像您只是从文本框中删除文本一样。对此的任何帮助将不胜感激。

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);
    }            
})

演示 - ＆gt;的 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）

Answer 3

只需实现此功能，它就可以很好地工作。我添加了一个图标按钮和一些简单的flex CSS，以使其内联。

var input = $('.dataTables_filter input').unbind(),
self = this.api(),
      $searchButton = $(`<button type="submit" 
                              class="btn btn-inverse dtSearchButton" 
                              id="button_search" 
                              data-toggle="tooltip" 
                              title="Apply Search"
                              style="padding:0,5px,0,5px"
                      >
                      <i class="fas fa-search"></i>
                      </button>`)
                  .click(function() {
                    self.search(input.val()).draw();
                  }),
      $clearButton = $(`<button 
                          type="button" 
                          class="btn btn-inverse dtSearchButton" 
                          id="button_trash" 
                          data-toggle="tooltip" 
                          title="Clear Search"
                          style="padding:0,5px,0,5px"
                        >
                        <i class="fas fa-trash"></i>
                        </button>`)
                .click(function() {
                    input.val('');
                    $searchButton.click(); 
                }) 
      
      $('.dataTables_filter').append($searchButton, $clearButton);

然后在CSS中：

.dataTables_filter{
  display:flex;
}

最终输出

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

3 个答案: