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 文件中描述的協定

      其他範例