Bootstrap 3
DataTables 可以使用 Bootstrap 的表格樣式選項,與 Bootstrap 3 無縫整合,為您的網站/應用程式提供基於 Bootstrap 的統一設計介面。
DataTables 的 Bootstrap 整合也為 DataTables 中的分頁控制項提供了一個渲染器,以確保表格的分頁也由 Bootstrap 一致地設定樣式。
此整合只需包含 DataTables Bootstrap 檔案(CSS 和 JS),即可設定 DataTables 正常初始化所需的預設值,如此範例所示。
姓名 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 |
---|---|---|---|---|---|
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 文件中描述的協定。