DataTables中dom选项的作用及隐藏表格信息摘要的方法

dom选项的工作机制 #

DataTables的dom选项只接受字符串，不是对象——这就是你之前设置对象导致表格失效的核心原因。这个字符串里的每个字符对应表格的一个UI组件，DataTables会按照字符串的顺序渲染这些组件。默认的dom值（比如lfrtip）包含了所有常用组件，你只需要移除不需要的字符，就能隐藏对应的组件。

各字符对应的核心组件：

• l: 每页条数选择器
• f: 搜索框
• t: 表格主体（必须保留，否则表格无法显示）
• i: 底部信息摘要（就是你要隐藏的部分）
• p: 分页控件
• r: 加载状态提示
• B: 自定义按钮容器（需Buttons插件支持）

隐藏信息摘要的具体实现 #

因为你已经关闭了分页（paging: false），要隐藏底部的信息摘要，只需要在初始化表格时，把dom设置为不包含i的字符串即可。举几个常见场景的例子：

1. 只保留表格主体：

$('#your-table-id').DataTable({
  paging: false,
  dom: 't'
});

2. 保留搜索框和表格主体：

$('#your-table-id').DataTable({
  paging: false,
  dom: 'ft'
});

3. 保留每页条数选择器、搜索框和表格主体：

$('#your-table-id').DataTable({
  paging: false,
  dom: 'lft'
});

只要确保字符串里没有i，底部的信息摘要就不会被渲染出来。

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