基礎樣式 - order-column
此範例展示了 DataTables 在表格使用 DataTables 基礎樣式時，僅指定了 order-column 類別。請注意，這不適用於其他樣式框架，例如 Bootstrap。其他框架提供它們自己的類別來修改表格的樣式。
通常你會想要除了 order-column 之外，還使用 stripe 功能類別（也可能包含 hover），但此範例僅顯示已排序的欄位高亮。
| 姓名 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 |
|---|---|---|---|---|---|
| Tiger Nixon | 系統架構師 | 愛丁堡 | 61 | 2011-04-25 | $320,800 |
| Garrett Winters | 會計 | 東京 | 63 | 2011-07-25 | $170,750 |
| Ashton Cox | 初級技術作者 | 舊金山 | 66 | 2009-01-12 | $86,000 |
| Cedric Kelly | 資深 Javascript 開發人員 | 愛丁堡 | 22 | 2012-03-29 | $433,060 |
| Airi Satou | 會計 | 東京 | 33 | 2008-11-28 | $162,700 |
| Brielle Williamson | 整合專家 | 紐約 | 61 | 2012-12-02 | $372,000 |
| Herrod Chandler | 銷售助理 | 舊金山 | 59 | 2012-08-06 | $137,500 |
| Rhona Davidson | 整合專家 | 東京 | 55 | 2010-10-14 | $327,900 |
| Colleen Hurst | Javascript 開發人員 | 舊金山 | 39 | 2009-09-15 | $205,500 |
| Sonya Frost | 軟體工程師 | 愛丁堡 | 23 | 2008-12-13 | $103,600 |
| Jena Gaines | 辦公室經理 | 倫敦 | 30 | 2008-12-19 | $90,560 |
| Quinn Flynn | 支援主管 | 愛丁堡 | 22 | 2013-03-03 | $342,000 |
| Charde Marshall | 區域總監 | 舊金山 | 36 | 2008-10-16 | $470,600 |
| Haley Kennedy | 資深行銷設計師 | 倫敦 | 43 | 2012-12-18 | $313,500 |
| Tatyana Fitzpatrick | 區域總監 | 倫敦 | 19 | 2010-03-17 | $385,750 |
| Michael Silva | 行銷設計師 | 倫敦 | 66 | 2012-11-27 | $198,500 |
| Paul Byrd | 財務長 (CFO) | 紐約 | 64 | 2010-06-09 | $725,000 |
| Gloria Little | 系統管理員 | 紐約 | 59 | 2009-04-10 | $237,500 |
| Bradley Greer | 軟體工程師 | 倫敦 | 41 | 2012-10-13 | $132,000 |
| Dai Rios | 人事主管 | 愛丁堡 | 35 | 2012-09-26 | $217,500 |
| Jenette Caldwell | 開發主管 | 紐約 | 30 | 2011-09-03 | $345,000 |
| Yuri Berry | 行銷長 (CMO) | 紐約 | 40 | 2009-06-25 | $675,000 |
| Caesar Vance | 售前支援 | 紐約 | 21 | 2011-12-12 | $106,450 |
| Doris Wilder | 銷售助理 | 雪梨 | 23 | 2010-09-20 | $85,600 |
| Angelica Ramos | 執行長 (CEO) | 倫敦 | 47 | 2009-10-09 | $1,200,000 |
| Gavin Joyce | 開發人員 | 愛丁堡 | 42 | 2010-12-22 | $92,575 |
| Jennifer Chang | 區域總監 | 新加坡 | 28 | 2010-11-14 | $357,650 |
| Brenden Wagner | 軟體工程師 | 舊金山 | 28 | 2011-06-07 | $206,850 |
| Fiona Green | 營運長 (COO) | 舊金山 | 48 | 2010-03-11 | $850,000 |
| Shou Itou | 區域行銷 | 東京 | 20 | 2011-08-14 | $163,000 |
| Michelle House | 整合專家 | 雪梨 | 37 | 2011-06-02 | $95,400 |
| Suki Burks | 開發人員 | 倫敦 | 53 | 2009-10-22 | $114,500 |
| Prescott Bartlett | 技術作者 | 倫敦 | 27 | 2011-05-07 | $145,000 |
| Gavin Cortez | 團隊領導 | 舊金山 | 22 | 2008-10-26 | $235,500 |
| Martena Mccray | 售後支援 | 愛丁堡 | 46 | 2011-03-09 | $324,050 |
| Unity Butler | 行銷設計師 | 舊金山 | 47 | 2009-12-09 | $85,675 |
| Howard Hatfield | 辦公室經理 | 舊金山 | 51 | 2008-12-16 | $164,500 |
| Hope Fuentes | 秘書 | 舊金山 | 41 | 2010-02-12 | $109,850 |
| Vivian Harrell | 財務總監 | 舊金山 | 62 | 2009-02-14 | $452,500 |
| Timothy Mooney | 辦公室經理 | 倫敦 | 37 | 2008-12-11 | $136,200 |
| Jackson Bradshaw | 總監 | 紐約 | 65 | 2008-09-26 | $645,750 |
| Olivia Liang | 支援工程師 | 新加坡 | 64 | 2011-02-03 | $234,500 |
| Bruno Nash | 軟體工程師 | 倫敦 | 38 | 2011-05-03 | $163,500 |
| Sakura Yamamoto | 支援工程師 | 東京 | 37 | 2009-08-19 | $139,575 |
| Thor Walton | 開發人員 | 紐約 | 61 | 2013-08-11 | $98,540 |
| Finn Camacho | 支援工程師 | 舊金山 | 47 | 2009-07-07 | $87,500 |
| Serge Baldwin | 資料協調員 | 新加坡 | 64 | 2012-04-09 | $138,575 |
| Zenaida Frank | 軟體工程師 | 紐約 | 63 | 2010-01-04 | $125,250 |
| Zorita Serrano | 軟體工程師 | 舊金山 | 56 | 2012-06-01 | $115,000 |
| Jennifer Acosta | 初級 Javascript 開發人員 | 愛丁堡 | 43 | 2013-02-01 | $75,650 |
| Cara Stevens | 銷售助理 | 紐約 | 46 | 2011-12-06 | $145,600 |
| Hermione Butler | 區域總監 | 倫敦 | 47 | 2011-03-21 | $356,250 |
| Lael Greer | 系統管理員 | 倫敦 | 21 | 2009-02-27 | $103,500 |
| Jonas Alexander | 開發人員 | 舊金山 | 30 | 2010-07-14 | $86,500 |
| Shad Decker | 區域總監 | 愛丁堡 | 51 | 2008-11-13 | $183,000 |
| Michael Bruce | Javascript 開發人員 | 新加坡 | 29 | 2011-06-27 | $183,000 |
| Donna Snider | 客戶支援 | 紐約 | 27 | 2011-01-25 | $112,000 |
| 姓名 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable();
new DataTable('#example');
除了上述程式碼之外，還會載入以下 Javascript 函式庫檔案以在此範例中使用
以下顯示的 HTML 是原始 HTML 表格元素，在被 DataTables 增強之前
此範例使用了一些額外的 CSS，超出從函式庫檔案載入的 CSS（如下所示），以便正確顯示表格。 使用的額外 CSS 如下所示
載入以下 CSS 函式庫檔案，用於此範例中，以提供表格的樣式
此表格透過 Ajax 載入資料。 以下顯示已載入的最新資料。 此資料將在載入任何其他資料時自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。 請注意，這只是一個使用 PHP 的範例腳本。 伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。