类逻辑

响应式操作有三种模式，用于控制表格中列的可见性

• 自动 - 响应式将会自动确定是否应该显示一个列
• 手动 - 你告诉响应式在什么屏幕尺寸上显示什么列。
• 优先级 - 使用 columns.responsivePriority 告诉响应式哪些列应该给予可见性优先级 - 请参阅 优先级文档 - (2.0.0).

这三种模式在表格中并不是相互排斥的，所有这三种类型的列都可以用在一个表格中。

手动模式通过将特定类分配给列来触发 - 该类与响应式中定义的断点的一组逻辑规则相匹配。这将在下面详细介绍。这个类可以在 Datatable 初始化之前添加到普通 html 表，或者通过使用 DataTables columns.className 选项添加。

如果响应式没有检测到与断点匹配的列的类名，或者以下面记录的特殊情况之一（all、none 和 control），列可见性将自动控制，列优先级定义隐藏顺序。

断点

为了定义不同屏幕尺寸在屏幕上显示哪些列，Responsive 有断点的概念。断点是浏览器视口（以像素为单位）的宽度，在该宽度上激活断点。例如，平板电脑断点可以在 1024 像素处激活，而手机断点可以在 480 像素处激活。通过命名这些断点，我们可以向表格添加类来控制列是否在这些断点处可见。例如，如果一列的类是 tablet，那么它将在平板电脑设备上可见，但不在手机或桌面浏览器上可见。

这些断点并非“自下而上”（bottom up）- 表可同时处于单个断点，而将列分配至较小断点并不表示它会在较大的断点中显示。例如，分配给mobile的列不会显示在tablet和desktop断点中。若要让某列显示在多个断点中，必须将它分配到每个断点。可通过columns.className选项执行此操作- 例如，className: 'tablet desktop'将在平板电脑和台式机屏幕宽度上显示。

响应式内置了五个断点

名称	宽度 (x) 范围
desktop	x > 1024
tablet-l（横向）	768 < x <= 1024
tablet-p（纵向）	480 < x <= 768
mobile-l（横向）	320 < x <= 768
mobile-p（纵向）	x <= 320

可使用responsive.breakpoints初始化选项，或者通过修改包含默认断点的$.fn.dataTable.Responsive.breakpoints数组来自定义断点。

特殊类

除了根据类名检测类，响应式还会检测以下特殊类

• all- 无论浏览器宽度如何，列始终可见
• none- 无论浏览器宽度如何，该列始终不可见，但数据将显示在详细信息视图中
• never- 无论浏览器宽度如何，该列始终不可见，数据不会显示在详细信息视图中 (1.0.2)。
• dtr-control- 这是responsive.details.type选项的column选项用于指定表中哪个列是控件列的特殊类。这样，响应式样式表就可以为该列添加必需的样式信息。

这些类可用于任何列，并且优先于断点类。

此外，请注意 DataTables 的列可见性 (columns.visible) 将影响 Responsive 使用的显示。如果列标记为隐藏，则它不会显示在详细信息视图中。

断点逻辑运算

使用完整的断点名称，您可以准确指定在每个断点处显示的列，但这可能会很冗长。例如，如果您想指定一个列在所有断点处可见，但desktop断点除外，则需要四个类。您可以这样做，但为了使复杂的组合更加简洁，Responsive 提供了将逻辑运算添加到断点类名中的功能

• 前缀
  • not-- 仅在命名的断点处不可见。例如，not-desktop仅在移动设备和平板电脑宽度处可见。
  • min-- 在大于或等于命名断点的宽度处可见。例如，min-tablet-l仅在tablet-l和desktop宽度处可见。
  • max-- 在小于或等于命名断点的宽度处可见。例如，min-tablet-p在tablet-p和移动设备断点处可见。
• 后缀
  • 可选项 -l 和 -p 用来指定平板和手机的横屏和纵屏断点。这会让指定设备组的列的可见性变得更简单。例如，tablet 会在 tablet-l 和 tablet-p 断点处可见。
  • 后缀（或反过来说，没有后缀）也可用在结合前缀逻辑运算中。例如，min-tablet 会在平板和手机断点处可见。

逻辑参考

下表列出了 Responsive 会自动检测的类名。

类名	包含的断点
desktop	desktop
not-desktop	tablet-l、tablet-p、mobile-l、mobile-p
min-desktop	desktop
max-desktop	desktop、tablet-l、tablet-p、mobile-l、mobile-p
tablet	tablet-l、tablet-p
not-tablet	desktop、mobile-l、mobile-p
min-tablet	desktop、tablet-l、tablet-p
max-tablet	tablet-l、tablet-p、mobile-l、mobile-p
tablet-l	tablet-l
not-tablet-l	desktop、tablet-p、mobile-l、mobile-p
min-tablet-l	desktop、tablet-l
max-tablet-l	tablet-l、tablet-p、mobile-l、mobile-p
tablet-p	tablet-p
not-tablet-p	desktop、tablet-l、mobile-l、mobile-p
min-tablet-p	desktop、tablet-l、tablet-p
max-tablet-p	tablet-p、mobile-l、mobile-p
mobile	mobile-l、mobile-p
not-mobile	desktop、tablet-l、tablet-p
min-mobile	desktop、tablet-l、tablet-p、mobile-l、mobile-p
max-mobile	mobile-l、mobile-p
mobile-l	mobile-l
not-mobile-l	desktop、tablet-p、tablet-l、mobile-p
min-mobile-l	desktop、tablet-l、tablet-p、mobile-l
max-mobile-l	mobile-l、mobile-p
mobile-p	mobile-p
not-mobile-p	desktop、tablet-l、tablet-p、mobile-l
min-mobile-p	desktop、tablet-l、tablet-p、mobile-l、mobile-p
max-mobile-p	mobile-p