類別邏輯

Responsive 具有三種操作模式，用於控制表格中欄位的可見性

• 自動 - Responsive 將自動決定是否應顯示欄位
• 手動 - 您可以告訴 Responsive 在哪些螢幕尺寸上顯示哪些欄位。
• 優先順序 - 使用 columns.responsivePriority 告訴 Responsive 哪些欄位應優先顯示 - 請參閱優先順序文件 - ( 2.0.0 )。

這三種模式在一個表格中並非互斥，可以在單一表格中使用所有三種類型的欄位。

手動模式是通過將特定的類別指定給欄位來觸發的，該類別符合 Responsive 中定義的斷點的一組邏輯規則。這在下面有詳細說明。可以在初始化 DataTable 之前將類別添加到純 HTML 表格，或使用 DataTables 的 columns.className 選項。

如果 Responsive 未偵測到與斷點匹配的欄位類別名稱，或下面註明的特殊情況（all、none 和 control），欄位可見性將根據欄位優先順序自動控制隱藏順序。

斷點

為了定義在不同螢幕尺寸下顯示哪些欄位，Responsive 有一個斷點的概念。斷點是瀏覽器視窗的寬度（以像素為單位），在此寬度上斷點會被啟動。例如，平板電腦斷點可能會在 1024 像素時啟動，而手機斷點則為 480 像素。透過命名這些斷點，我們可以將類別新增到表格，以控制欄位在這些斷點是否可見。例如，如果一個欄位具有 tablet 類別，則它在平板電腦裝置上可見，但在行動裝置或桌面瀏覽器上不可見。

斷點不是「由下而上」的 — 表格一次只能在一個斷點中，將欄位指定給較小的斷點並不意味著它會出現在較大的斷點中。例如，指定為 mobile 的欄位不會出現在 tablet 和 desktop 斷點中。要讓欄位出現在多個斷點上，必須將其指定給每個斷點。這可以使用 columns.className 選項完成 — 例如 className: 'tablet desktop'，以在平板電腦和桌面螢幕寬度上顯示。

Responsive 內建了五個斷點

名稱	寬度 (x) 範圍
桌面	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 陣列。

特殊類別

除了偵測基於類別名稱的類別之外，Responsive 還會偵測以下特殊類別

• all — 欄位將始終可見，無論瀏覽器寬度如何
• none — 欄位將永遠不可見，無論瀏覽器寬度如何，但資料將顯示在詳細資訊檢視中
• never — 欄位將永遠不可見，無論瀏覽器寬度如何，且資料將不會顯示在詳細資訊檢視中 ( 1.0.2 )。
• dtr-control — 這是 responsive.details.type 選項的 column 選項使用的特殊類別，用於指定表格中的哪個欄位是控制欄位。這允許 Responsive 樣式表為欄位新增必要的樣式資訊。

這些類別可以在任何欄位上使用，並且優先於斷點類別。

此外，請注意 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 將自動偵測的類別名稱。

類別名稱	包含在內的斷點
桌面	桌面
not-desktop	tablet-l、tablet-p、mobile-l、mobile-p
min-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