如何在Bootstrap DataTable的dom中结合使用Bfrtip与Zlfrtip

我来帮你搞定这个重复组件的问题！

你遇到的重复搜索框、分页组件的根源，是dom参数里重复写了frtip这一段——DataTables的dom配置是按字母对应组件逐个渲染的，写两次就会生成两套一模一样的组件。

先给你理清楚每个字母对应的功能组件：

• B: 导出按钮（就是你用的Bfrtip里的按钮容器）
• Z: colResize插件的列宽调整控制栏
• l: 每页条数选择器
• f: 搜索框
• r: 表格加载状态提示
• t: 表格主体
• i: 数据信息提示（比如“显示1-10条，共50条”）
• p: 分页组件

你原来的'Bfrtip Zlfrtip'相当于把f、r、t、i、p这些组件重复渲染了两次，自然就出现了双份的搜索框和分页。

正确的做法是把所有需要的组件按你想要的顺序只声明一次，比如把Z（列调整控制）放在导出按钮之后，再依次排列其他组件。推荐的配置如下：

$('#table').DataTable({
  "ordering": false,
  "scrollX": true,
  "dom": 'BZlfrtip', // 核心：每个组件字母只出现一次，Z插入到合适位置
  "bScrollCollapse": true,
  // 补充你的导出按钮配置（如果之前有写的话）
  buttons: [
    'csv', 'pdf'
  ]
});

如果你想调整列宽控制栏的显示位置，直接修改Z在dom字符串里的顺序就行，只要确保每个组件对应的字母只出现一次，就不会再出现重复的元素了。

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