捲軸表格
此範例展示了與 FixedHeader 一起使用的捲軸 DataTable。此擴充功能與捲軸表格之間的整合在過去不受支援，但現在已完全支援。
使用捲軸表格時，標頭的行為將與 FixedHeader 的行為相同。當頁尾處於固定狀態時，將不再浮動於頁面底部。相反地，表格會適當調整大小，以便頁尾始終位於螢幕底部。
| 名字 | 姓氏 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 | 分機 | 電子郵件 |
|---|---|---|---|---|---|---|---|---|
| 名字 | 姓氏 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 | 分機 | 電子郵件 |
| 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({ fixedHeader: { header: true, footer: true }, paging: false, scrollCollapse: true, scrollX: true, scrollY: 300 });
new DataTable('#example', { fixedHeader: { header: true, footer: true }, paging: false, scrollCollapse: true, scrollX: true, scrollY: 300 });
除了上述程式碼外，還載入了以下 Javascript 程式庫檔案以在此範例中使用
以下顯示的 HTML 是原始 HTML 表格元素，在由 DataTables 增強之前
此範例除了從程式庫檔案載入的 CSS (如下) 之外，還使用了一些額外的 CSS，以便正確顯示表格。以下顯示使用的額外 CSS
載入以下 CSS 程式庫檔案以在此範例中使用，以提供表格的樣式
此表格通過 Ajax 載入資料。 以下顯示已載入的最新資料。 隨著載入任何其他資料，此資料將自動更新。
以下顯示用於執行此表格的伺服器端處理的腳本。 請注意，這只是一個使用 PHP 的範例腳本。 伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。