类控制
你可以通过使用列中的类名称来告诉响应式哪些列应该在不同设备上可见。断点是水平屏幕分辨率，默认为常见设备设置
桌面x >= 1024px平板电脑-l（横向） 768 <= x < 1024平板电脑-p（纵向）480 <= x < 768移动-l（横向） 320 <= x < 480移动 - p（纵向）x < 320
如果你只想针对所有平板电脑或移动设备，你可以从末尾去掉-[lp]选项。此外，添加min-、max-或not-作为类名称的前缀来执行逻辑运算。例如，not-mobile会导致一列显示为在桌面和平板电脑设备上可见，而min-tablet-l要求浏览器窗口的水平宽度至少为 768，并且在所有更大尺寸中显示。
此外，还有三个特殊的类名
all-始终显示none- 不显示为列，但在子行中显示never- 永远不显示-
control- 用于列responsive.details.type选项。
请参阅响应式手册以获得这些选项的更多详细信息。
此示例显示了工资列在桌面和平板电脑上可见 - 办公室需要平板电脑，而职位列需要横向手机或更大的手机。名称列始终可见，开始日期永远不可见。
如果你希望更改在不同设备上显示的数据格式，这会很有用，例如在两列上使用mobile和not-mobile的组合将允许以适合每种设备类型的方式格式化信息。
| 姓名 | 职位 | 办公室 | 开始日期 | 工资 | 分机号 |
|---|---|---|---|---|---|
| 姓名 | 职位 | 办公室 | 开始日期 | 工资 | 分机号 |
- JavaScript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
下面显示的 JavaScript 用于初始化此示例中显示的表格
$('#example').DataTable({ ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'start_date' }, { data: 'salary' }, { data: 'extn' } ], responsive: true });
new DataTable('#example', { ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'start_date' }, { data: 'salary' }, { data: 'extn' } ], responsive: true });
除了上述代码外，还加载了以下 JavaScript 库文件用于此示例
下面显示的 HTML 是原始 HTML 表元素，在被 DataTables 增强之前
此示例使用少许额外的 CSS，超出库文件（如下所示）加载的内容，以便正确显示表格。下面显示了使用的追加 CSS
以下 CSS 库文件已加载到此示例中以提供表格样式
此表格通过 Ajax 加载数据。下面显示了已加载的最新数据。加载任何其他数据后，此数据将自动更新。
下面显示了用于执行此表格的服务器端处理的脚本。请注意，这只使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用DataTables 文档中描述的协议。