实现自定义搜索框与DataTables内置搜索框联动

我完全懂你的痛点——DataTables自带的搜索框位置太死，用CSS挪位置经常踩各种样式坑，换成自定义搜索框联动内置功能确实是最优解。下面就一步步教你实现：

1. 先把DataTables实例存起来 #

初始化表格的时候，一定要把实例赋值给一个变量，这样后面才能方便调用它的搜索API，不然没法直接操控内置搜索逻辑：

// 把表格实例保存到变量，后面要用
const kmTable = $('#km-table-id').DataTable( {
    columns: [
        { data: "Titles" }, // 填充文档列
        { data: "Categories" } // 隐藏的分类列
    ],
    columnDefs: [
        { 
            data: "Path", 
            render: function(data, type, row) {
                return $('<a>')
                    .attr({target: "_blank", href: row.Path})
                    .text(data)
                    .wrap('<div></div>')
                    .parent()
                    .html();
            }, 
            targets: 0 
        },
        { searchable: true, targets: [1], visible: false },
    ],
    data: tableRes,
    language: { searchPlaceholder: "Search All Documents" },
    order: [],
    pageLength: 500,
    pagingType: "full_numbers",
    responsive: true,
    scrollCollapse: true,
    scrollX: true,
    scrollY: 450
});

2. 给自定义搜索框加联动逻辑 #

这里推荐用keyup事件（别用keypress！），因为keypress不会响应退格、删除这类按键，用户删内容的时候搜索结果不会同步更新，体验很差。代码如下：

$("#searchbar").on('keyup', function() {
    // 获取输入框里的内容，顺便去掉首尾空格
    const searchText = $(this).val().trim();
    // 调用DataTables的内置搜索API，然后重新渲染表格
    kmTable.search(searchText).draw();
});

简单解释下：search(searchText)会把你的输入内容传给DataTables的搜索引擎，和内置搜索框输入的效果完全一样；draw()是让表格重新渲染，展示匹配的结果。

如果想支持回车触发搜索（避免用户每打一个字就刷新一次），可以加个判断：

$("#searchbar").on('keyup', function(e) {
    // 只有按回车键的时候才执行搜索
    if (e.keyCode === 13) {
        const searchText = $(this).val().trim();
        kmTable.search(searchText).draw();
    }
});

3. 彻底隐藏内置搜索框 #

用CSS把默认的搜索框藏起来，比visibility: hidden更彻底的是display: none，不会占着位置：

.dataTables_wrapper .dataTables_filter {
    display: none;
}

最后确认你的自定义搜索框HTML #

你提供的HTML没问题，这里再贴一下（注意把转义的<和>换成正常的HTML标签）：

<div class="form-group">
    <input type="search" class="form-control" id="searchbar" placeholder="Search All Documents...">
</div>

这样一套操作下来，你的自定义搜索框就完全替代了DataTables的内置搜索，功能一模一样，位置还能随便你放！

内容的提问来源于stack exchange，提问作者Bodrov