如何将DataTables筛选栏等功能元素移动到页面指定位置

核心实现逻辑 #

DataTables默认的dom配置仅支持将搜索栏、分页等内置控件放置在表格周边的相邻位置，无法直接指定到页面其他独立区块。要实现任意位置放置，只需要在DataTables完成DOM渲染后，通过jQuery选择对应控件节点，直接移动到目标容器即可，这种原生DOM节点移动的方式不会破坏控件原有的事件绑定，搜索、分页等所有内置功能都可以正常使用。
之前用getElementById操作无效的原因有两个：一是DataTables生成的内置控件默认没有固定ID，仅挂载了约定的class名，按ID查找无法选中元素；二是执行DOM操作的时机早于DataTables渲染完成，目标节点还未生成。

搜索栏移动到.filters区块的具体代码 #

修改原有的DataTables初始化脚本即可：

$(document).ready(function () {
    $('#example').DataTable({
        // 配置dom参数，移除默认位置的搜索栏（f代表filter搜索框），避免原位置留空占位
        dom: 'lrtip'
    });
    // 选中DataTables生成的搜索栏节点，追加到.filters区块内
    $('.filters').append($('.dataTables_filter'));
});

如果需要调整移动后搜索栏的显示样式，适配左侧筛选区宽度，可以补充对应CSS：

.filters .dataTables_filter {
    padding: 12px;
    width: 100%;
    margin: 0;
}
.filters .dataTables_filter input {
    width: 70%;
    margin-left: 8px;
}

移动任意内置控件的通用方法 #

所有DataTables内置控件都有固定的class名，只要在初始化完成后选中对应节点，移动到目标容器即可，常用控件对应class如下：

• 搜索筛选栏：.dataTables_filter
• 每页显示条数选择下拉：.dataTables_length
• 分页控件：.dataTables_paginate
• 条目统计信息（如“显示第1到10条记录，共57条”）：.dataTables_info
• 加载中状态提示：.dataTables_processing

操作注意事项：

• 所有DOM移动操作必须在DataTables初始化完成后执行，既可以像示例一样在DataTable()实例化方法后直接执行，也可以写在initComplete初始化回调函数中
• 如果不需要控件在默认位置占位，记得在dom配置字符串中删除对应控件的标识字符：l对应条数选择、f对应搜索框、i对应信息提示、p对应分页、r对应加载提示、t对应表格本身

预期效果 #

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