使用 ColReorder
此範例示範如何將 Responsive 與 DataTables 的 ColReorder 擴充功能搭配使用，此擴充功能可讓您透過點擊並拖曳欄位標頭來重新排序欄位。
| 名字 | 姓氏 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 | 分機 | 電子郵件 |
|---|---|---|---|---|---|---|---|---|
| Tiger | Nixon | 系統架構師 | 愛丁堡 | 61 | 2011-04-25 | $320,800 | 5421 | t.nixon@datatables.net |
| Garrett | Winters | 會計師 | 東京 | 63 | 2011-07-25 | $170,750 | 8422 | g.winters@datatables.net |
| Ashton | Cox | 初級技術作家 | 舊金山 | 66 | 2009-01-12 | $86,000 | 1562 | a.cox@datatables.net |
| Cedric | Kelly | 資深 Javascript 開發人員 | 愛丁堡 | 22 | 2012-03-29 | $433,060 | 6224 | c.kelly@datatables.net |
| Airi | Satou | 會計師 | 東京 | 33 | 2008-11-28 | $162,700 | 5407 | a.satou@datatables.net |
| Brielle | Williamson | 整合專家 | 紐約 | 61 | 2012-12-02 | $372,000 | 4804 | b.williamson@datatables.net |
| Herrod | Chandler | 銷售助理 | 舊金山 | 59 | 2012-08-06 | $137,500 | 9608 | h.chandler@datatables.net |
| Rhona | Davidson | 整合專家 | 東京 | 55 | 2010-10-14 | $327,900 | 6200 | r.davidson@datatables.net |
| Colleen | Hurst | Javascript 開發人員 | 舊金山 | 39 | 2009-09-15 | $205,500 | 2360 | c.hurst@datatables.net |
| Sonya | Frost | 軟體工程師 | 愛丁堡 | 23 | 2008-12-13 | $103,600 | 1667 | s.frost@datatables.net |
| Jena | Gaines | 辦公室經理 | 倫敦 | 30 | 2008-12-19 | $90,560 | 3814 | j.gaines@datatables.net |
| Quinn | Flynn | 支援主管 | 愛丁堡 | 22 | 2013-03-03 | $342,000 | 9497 | q.flynn@datatables.net |
| Charde | Marshall | 區域總監 | 舊金山 | 36 | 2008-10-16 | $470,600 | 6741 | c.marshall@datatables.net |
| Haley | Kennedy | 資深行銷設計師 | 倫敦 | 43 | 2012-12-18 | $313,500 | 3597 | h.kennedy@datatables.net |
| Tatyana | Fitzpatrick | 區域總監 | 倫敦 | 19 | 2010-03-17 | $385,750 | 1965 | t.fitzpatrick@datatables.net |
| Michael | Silva | 行銷設計師 | 倫敦 | 66 | 2012-11-27 | $198,500 | 1581 | m.silva@datatables.net |
| Paul | Byrd | 財務長 (CFO) | 紐約 | 64 | 2010-06-09 | $725,000 | 3059 | p.byrd@datatables.net |
| Gloria | Little | 系統管理員 | 紐約 | 59 | 2009-04-10 | $237,500 | 1721 | g.little@datatables.net |
| Bradley | Greer | 軟體工程師 | 倫敦 | 41 | 2012-10-13 | $132,000 | 2558 | b.greer@datatables.net |
| Dai | Rios | 人事主管 | 愛丁堡 | 35 | 2012-09-26 | $217,500 | 2290 | d.rios@datatables.net |
| Jenette | Caldwell | 開發主管 | 紐約 | 30 | 2011-09-03 | $345,000 | 1937 | j.caldwell@datatables.net |
| Yuri | Berry | 行銷長 (CMO) | 紐約 | 40 | 2009-06-25 | $675,000 | 6154 | y.berry@datatables.net |
| Caesar | Vance | 銷售前支援 | 紐約 | 21 | 2011-12-12 | $106,450 | 8330 | c.vance@datatables.net |
| Doris | Wilder | 銷售助理 | 雪梨 | 23 | 2010-09-20 | $85,600 | 3023 | d.wilder@datatables.net |
| Angelica | Ramos | 執行長 (CEO) | 倫敦 | 47 | 2009-10-09 | $1,200,000 | 5797 | a.ramos@datatables.net |
| Gavin | Joyce | 開發人員 | 愛丁堡 | 42 | 2010-12-22 | $92,575 | 8822 | g.joyce@datatables.net |
| Jennifer | Chang | 區域總監 | 新加坡 | 28 | 2010-11-14 | $357,650 | 9239 | j.chang@datatables.net |
| Brenden | Wagner | 軟體工程師 | 舊金山 | 28 | 2011-06-07 | $206,850 | 1314 | b.wagner@datatables.net |
| Fiona | Green | 營運長 (COO) | 舊金山 | 48 | 2010-03-11 | $850,000 | 2947 | f.green@datatables.net |
| Shou | Itou | 區域行銷 | 東京 | 20 | 2011-08-14 | $163,000 | 8899 | s.itou@datatables.net |
| Michelle | House | 整合專家 | 雪梨 | 37 | 2011-06-02 | $95,400 | 2769 | m.house@datatables.net |
| Suki | Burks | 開發人員 | 倫敦 | 53 | 2009-10-22 | $114,500 | 6832 | s.burks@datatables.net |
| Prescott | Bartlett | 技術作家 | 倫敦 | 27 | 2011-05-07 | $145,000 | 3606 | p.bartlett@datatables.net |
| Gavin | Cortez | 團隊領導 | 舊金山 | 22 | 2008-10-26 | $235,500 | 2860 | g.cortez@datatables.net |
| Martena | Mccray | 銷售後支援 | 愛丁堡 | 46 | 2011-03-09 | $324,050 | 8240 | m.mccray@datatables.net |
| Unity | Butler | 行銷設計師 | 舊金山 | 47 | 2009-12-09 | $85,675 | 5384 | u.butler@datatables.net |
| Howard | Hatfield | 辦公室經理 | 舊金山 | 51 | 2008-12-16 | $164,500 | 7031 | h.hatfield@datatables.net |
| Hope | Fuentes | 秘書 | 舊金山 | 41 | 2010-02-12 | $109,850 | 6318 | h.fuentes@datatables.net |
| Vivian | Harrell | 財務主管 | 舊金山 | 62 | 2009-02-14 | $452,500 | 9422 | v.harrell@datatables.net |
| Timothy | Mooney | 辦公室經理 | 倫敦 | 37 | 2008-12-11 | $136,200 | 7580 | t.mooney@datatables.net |
| Jackson | Bradshaw | 總監 | 紐約 | 65 | 2008-09-26 | $645,750 | 1042 | j.bradshaw@datatables.net |
| Olivia | Liang | 支援工程師 | 新加坡 | 64 | 2011-02-03 | $234,500 | 2120 | o.liang@datatables.net |
| Bruno | Nash | 軟體工程師 | 倫敦 | 38 | 2011-05-03 | $163,500 | 6222 | b.nash@datatables.net |
| Sakura | Yamamoto | 支援工程師 | 東京 | 37 | 2009-08-19 | $139,575 | 9383 | s.yamamoto@datatables.net |
| Thor | Walton | 開發人員 | 紐約 | 61 | 2013-08-11 | $98,540 | 8327 | t.walton@datatables.net |
| Finn | Camacho | 支援工程師 | 舊金山 | 47 | 2009-07-07 | $87,500 | 2927 | f.camacho@datatables.net |
| Serge | Baldwin | 資料協調員 | 新加坡 | 64 | 2012-04-09 | $138,575 | 8352 | s.baldwin@datatables.net |
| Zenaida | Frank | 軟體工程師 | 紐約 | 63 | 2010-01-04 | $125,250 | 7439 | z.frank@datatables.net |
| Zorita | Serrano | 軟體工程師 | 舊金山 | 56 | 2012-06-01 | $115,000 | 4389 | z.serrano@datatables.net |
| Jennifer | Acosta | 初級 Javascript 開發人員 | 愛丁堡 | 43 | 2013-02-01 | $75,650 | 3431 | j.acosta@datatables.net |
| Cara | Stevens | 銷售助理 | 紐約 | 46 | 2011-12-06 | $145,600 | 3990 | c.stevens@datatables.net |
| Hermione | Butler | 區域總監 | 倫敦 | 47 | 2011-03-21 | $356,250 | 1016 | h.butler@datatables.net |
| Lael | Greer | 系統管理員 | 倫敦 | 21 | 2009-02-27 | $103,500 | 6733 | l.greer@datatables.net |
| Jonas | Alexander | 開發人員 | 舊金山 | 30 | 2010-07-14 | $86,500 | 8196 | j.alexander@datatables.net |
| Shad | Decker | 區域總監 | 愛丁堡 | 51 | 2008-11-13 | $183,000 | 6373 | s.decker@datatables.net |
| Michael | Bruce | Javascript 開發人員 | 新加坡 | 29 | 2011-06-27 | $183,000 | 5384 | m.bruce@datatables.net |
| Donna | Snider | 客戶支援 | 紐約 | 27 | 2011-01-25 | $112,000 | 4226 | d.snider@datatables.net |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ colReorder: true, responsive: true });
new DataTable('#example', { colReorder: true, responsive: true });
除了上述程式碼外，還載入下列 Javascript 函式庫檔案以用於此範例
以下顯示的 HTML 是原始 HTML 表格元素，尚未經過 DataTables 增強
此範例除了從函式庫檔案 (如下) 載入的內容外，還使用了一些額外的 CSS，以便正確顯示表格。 使用的額外 CSS 如下所示
以下 CSS 函式庫檔案會載入以用於此範例，以提供表格的樣式
此表格透過 Ajax 載入資料。 以下顯示已載入的最新資料。 載入任何其他資料時，此資料會自動更新。
以下顯示用於執行此表格的伺服器端處理的腳本。 請注意，這只是一個使用 PHP 的範例腳本。 伺服器端處理腳本可以使用任何語言編寫，並使用 DataTables 文件中描述的協定。