類別控制
您可以透過在欄位上使用類別名稱，告知 Responsive 哪些欄位應在不同的裝置上顯示。中斷點是水平螢幕解析度，預設值是為常見裝置設定的
desktopx >= 1024pxtablet-l(橫向) 768 <= x < 1024tablet-p(直向) 480 <= x < 768mobile-l(橫向) 320 <= x < 480mobile-p(直向) x < 320
如果您只想以所有平板電腦或行動裝置為目標，您可以將結尾的 -[lp] 選項省略。此外，在類別名稱中加入 min-、max- 或 not- 作為前綴，以執行邏輯運算。例如，not-mobile 會讓欄位在桌上型電腦和平板電腦裝置上顯示為可見，而 min-tablet-l 則需要瀏覽器視窗的水平寬度至少為 768 才能顯示，並且會顯示在所有較大的尺寸中。
此外，還有三個特殊的類別名稱
all- 總是顯示none- 不顯示為欄位，而是在子列中顯示never- 永遠不顯示-
control- 用於columnresponsive.details.type選項。
請參考 Responsive 手冊，以取得這些選項的詳細資訊。
此範例顯示 salary 欄位在桌上型電腦和平板電腦上可見 - office 需要平板電腦，而 position 欄位則需要在橫向或更大的手機上顯示。name 欄位永遠可見，而 start date 永遠不可見。
如果您想要變更在不同裝置上顯示的資料格式，這會很有用，例如在兩個不同欄位上使用 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 文件中描述的協定。