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