多欄排序
DataTables 允許同時依多個欄位排序，可透過多種方式啟用
- 使用者按住 Shift 鍵點擊欄位（將點擊的欄位加入為第二、第三等排序欄位）。
- 以每個欄位為基礎（例如，先依特定欄位排序，如果第一個欄位的資料相同，則依第二個欄位排序），透過
columns.orderData選項。 - 使用
columns.orderData選項來預設指定多欄排序（例如[ 0, 1 ]）。 - 透過
order()API 方法。
請注意，使用者按住 Shift 鍵點擊以排序多欄的功能，可透過 orderMulti 選項停用。
下面的範例顯示，第一欄對表格中的第二欄套用次要排序，第二欄反之與第一欄直接關聯，而薪資欄則與名字欄關聯。
| 名字 | 姓氏 | 職位 | 辦公室 | 薪資 |
|---|---|---|---|---|
| Tiger | Nixon | 系統架構師 | 愛丁堡 | 320800 |
| Garrett | Winters | 會計 | 東京 | 170750 |
| Ashton | Cox | 初級技術作者 | 舊金山 | 86000 |
| Cedric | Kelly | 資深 Javascript 開發人員 | 愛丁堡 | 433060 |
| Airi | Satou | 會計 | 東京 | 162700 |
| Brielle | Williamson | 整合專家 | 紐約 | 372000 |
| Herrod | Chandler | 銷售助理 | 舊金山 | 137500 |
| Rhona | Davidson | 整合專家 | 東京 | 327900 |
| Colleen | Hurst | Javascript 開發人員 | 舊金山 | 205500 |
| Sonya | Frost | 軟體工程師 | 愛丁堡 | 103600 |
| Jena | Gaines | 辦公室經理 | 倫敦 | 90560 |
| Quinn | Flynn | 支援主管 | 愛丁堡 | 342000 |
| Charde | Marshall | 區域總監 | 舊金山 | 470600 |
| Haley | Kennedy | 資深行銷設計師 | 倫敦 | 313500 |
| Tatyana | Fitzpatrick | 區域總監 | 倫敦 | 385750 |
| Michael | Silva | 行銷設計師 | 倫敦 | 198500 |
| Paul | Byrd | 財務長 (CFO) | 紐約 | 725000 |
| Gloria | Little | 系統管理員 | 紐約 | 237500 |
| Bradley | Greer | 軟體工程師 | 倫敦 | 132000 |
| Dai | Rios | 人事主管 | 愛丁堡 | 217500 |
| Jenette | Caldwell | 開發主管 | 紐約 | 345000 |
| Yuri | Berry | 行銷長 (CMO) | 紐約 | 675000 |
| Caesar | Vance | 售前支援 | 紐約 | 106450 |
| Doris | Wilder | 銷售助理 | 雪梨 | 85600 |
| Angelica | Ramos | 執行長 (CEO) | 倫敦 | 1200000 |
| Gavin | Joyce | 開發人員 | 愛丁堡 | 92575 |
| Jennifer | Chang | 區域總監 | 新加坡 | 357650 |
| Brenden | Wagner | 軟體工程師 | 舊金山 | 206850 |
| Fiona | Green | 營運長 (COO) | 舊金山 | 850000 |
| Shou | Itou | 區域行銷 | 東京 | 163000 |
| Michelle | House | 整合專家 | 雪梨 | 95400 |
| Suki | Burks | 開發人員 | 倫敦 | 114500 |
| Prescott | Bartlett | 技術作者 | 倫敦 | 145000 |
| Gavin | Cortez | 團隊領導 | 舊金山 | 235500 |
| Martena | Mccray | 售後支援 | 愛丁堡 | 324050 |
| Unity | Butler | 行銷設計師 | 舊金山 | 85675 |
| Howard | Hatfield | 辦公室經理 | 舊金山 | 164500 |
| Hope | Fuentes | 秘書 | 舊金山 | 109850 |
| Vivian | Harrell | 財務總監 | 舊金山 | 452500 |
| Timothy | Mooney | 辦公室經理 | 倫敦 | 136200 |
| Jackson | Bradshaw | 總監 | 紐約 | 645750 |
| Olivia | Liang | 支援工程師 | 新加坡 | 234500 |
| Bruno | Nash | 軟體工程師 | 倫敦 | 163500 |
| Sakura | Yamamoto | 支援工程師 | 東京 | 139575 |
| Thor | Walton | 開發人員 | 紐約 | 98540 |
| Finn | Camacho | 支援工程師 | 舊金山 | 87500 |
| Serge | Baldwin | 資料協調員 | 新加坡 | 138575 |
| Zenaida | Frank | 軟體工程師 | 紐約 | 125250 |
| Zorita | Serrano | 軟體工程師 | 舊金山 | 115000 |
| Jennifer | Acosta | 初級 Javascript 開發人員 | 愛丁堡 | 75650 |
| Cara | Stevens | 銷售助理 | 紐約 | 145600 |
| Hermione | Butler | 區域總監 | 倫敦 | 356250 |
| Lael | Greer | 系統管理員 | 倫敦 | 103500 |
| Jonas | Alexander | 開發人員 | 舊金山 | 86500 |
| Shad | Decker | 區域總監 | 愛丁堡 | 183000 |
| Michael | Bruce | Javascript 開發人員 | 新加坡 | 183000 |
| Donna | Snider | 客戶支援 | 紐約 | 112000 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
下方顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ columnDefs: [ { targets: [0], orderData: [0, 1] }, { targets: [1], orderData: [1, 0] }, { targets: [4], orderData: [4, 0] } ] });
new DataTable('#example', { columnDefs: [ { targets: [0], orderData: [0, 1] }, { targets: [1], orderData: [1, 0] }, { targets: [4], orderData: [4, 0] } ] });
除了上述程式碼之外，還載入了以下 Javascript 函式庫檔案，以用於此範例
下方顯示的 HTML 是原始 HTML 表格元素，尚未由 DataTables 加強
此範例除了從函式庫檔案載入的 CSS 之外 (如下所示)，還使用了一些額外的 CSS，以便正確顯示表格。使用的額外 CSS 如下所示
載入以下 CSS 函式庫檔案，以便在此範例中使用，以提供表格的樣式
此表格透過 Ajax 載入資料。下方顯示的是已載入的最新資料。當載入任何其他資料時，此資料將自動更新。
下方顯示的是用於執行此表格的伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，並使用 DataTables 文件中描述的通訊協定。