為DataTables JQuery插件創建自定義搜索框

Question

因此，正如標題所述，我正在嘗試為DataTables JQuery插件創建自己的搜索框，因為默認位置對我不起作用，也沒有DOM配置，原因是Im試圖將其放入用於顯示目的的表格。

我有這個HTML位：

<th>Search by plan name and number :<br><input type="text" id="searchbox"></th>

對於初始化DataTables的腳本

<script>
$(document).ready(function() {
    var dataTable = $('#table_id').DataTable( {
        "dom": '<"top"f>rt<"bottom"lp>' //adjust the locations of defaults
    });

    // Custom search box
    $("#searchbox").keyup(function() {
    dataTable.fnFilter(this.value);
    }); 
});
</script>

最后在CSS中，我添加了此位，刪除了默認搜索框：

.dataTables_filter {
   display: none;
}

但是，每當我在自定義框中鍵入內容時，都不會發生任何事情。 有任何建議或編輯方法嗎？

PS：我還試圖調整頁面選擇器的位置和“顯示＃中的＃”信息位，因此，如果有人知道如何將其移動/在其他地方重新創建（可能與搜索欄的方式相同），請感到免費分享。 謝謝！

Answer 1

我找到了一些修復它的代碼！ 原來我的原始腳本不正確，這應該是這樣的：

<script>
        $(document).ready(function() {
            var dataTable = $('#table_id').DataTable( {
                "dom": '<"top"f>rt<"bottom"lp>' //adjust the locations of defaults
            });

            // Custom search bar - **THIS IS WHAT CHANGED**
            $('#searchbox').keyup(function(){
                dataTable.search($(this).val()).draw() ;
            }) 
        });
</script>