DataTables搜索按鈕單擊而不是輸入輸入

Question

我想知道是否可以將搜索功能移出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>

但是，當我點擊按鈕時，這不起作用。 在輸入這個問題時，我意識到這可能是因為當我點擊按鈕時，它不知道從哪里獲取過濾器文本來實際過濾表格。

有沒有辦法我可以點擊一個按鈕來引用輸入，然后去過濾表？

Answer 1

你是對的，你需要重新定義$(this) ，現在指的是按鈕，而不是搜索框：

$(document).ready(function() {
    var oTable = $('#staffTable').DataTable();
    $('#searchButton').click(function () {
        oTable.search($("#searchNameField").val()).draw();
    });

    // EDIT: Capture enter press as well
    $("#searchNameField").keypress(function(e) {
        // You can use $(this) here, since this once again refers to your text input            
        if(e.which === 13) {
            e.preventDefault(); // Prevent form submit
            oTable.search($(this).val()).draw();
        }
    });
});