javascript - 为 DataTables JQuery 插件创建自定义搜索框

Question

所以正如标题所说，我正在尝试为 DataTables JQuery 插件创建自己的搜索框，因为默认位置对我不起作用，也没有 DOM 配置，原因是我试图将其放入内部用于显示目的的一行表格。

我有这个 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;
}

然而，每当我在我的自定义框中输入时，什么都没有发生。有任何关于编辑此内容的建议或操作方法吗？

P.S:我也在尝试调整页面选择器的位置和“显示#out of#”信息位，所以如果有人知道如何移动这些/在其他地方重新创建(可能与搜索栏的方式相同)那么请随时分享。谢谢!

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>