Bootstrap 3 風格
此範例展示 DataTables 和響應式擴充功能與 Bootstrap 3 框架一起使用，以提供樣式。 DataTables / Bootstrap 整合 為 DataTables 在 Bootstrap 3 頁面中的使用提供了無縫整合。
| 名字 | 姓氏 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 | 分機 | 電子郵件 |
|---|---|---|---|---|---|---|---|---|
| 老虎 | 尼克森 | 系統架構師 | 愛丁堡 | 61 | 2011-04-25 | $320,800 | 5421 | t.nixon@datatables.net |
| 蓋瑞特 | 溫特斯 | 會計師 | 東京 | 63 | 2011-07-25 | $170,750 | 8422 | g.winters@datatables.net |
| 艾希頓 | 考克斯 | 初級技術作者 | 舊金山 | 66 | 2009-01-12 | $86,000 | 1562 | a.cox@datatables.net |
| 塞德里克 | 凱利 | 資深 JavaScript 開發人員 | 愛丁堡 | 22 | 2012-03-29 | $433,060 | 6224 | c.kelly@datatables.net |
| 愛莉 | 佐藤 | 會計師 | 東京 | 33 | 2008-11-28 | $162,700 | 5407 | a.satou@datatables.net |
| 布莉兒 | 威廉森 | 整合專家 | 紐約 | 61 | 2012-12-02 | $372,000 | 4804 | b.williamson@datatables.net |
| 赫羅德 | 錢德勒 | 銷售助理 | 舊金山 | 59 | 2012-08-06 | $137,500 | 9608 | h.chandler@datatables.net |
| 羅娜 | 戴維森 | 整合專家 | 東京 | 55 | 2010-10-14 | $327,900 | 6200 | r.davidson@datatables.net |
| 柯琳 | 赫斯特 | JavaScript 開發人員 | 舊金山 | 39 | 2009-09-15 | $205,500 | 2360 | c.hurst@datatables.net |
| 桑妮雅 | 佛斯特 | 軟體工程師 | 愛丁堡 | 23 | 2008-12-13 | $103,600 | 1667 | s.frost@datatables.net |
| 珍娜 | 蓋恩斯 | 辦公室經理 | 倫敦 | 30 | 2008-12-19 | $90,560 | 3814 | j.gaines@datatables.net |
| 奎因 | 弗林 | 支援主管 | 愛丁堡 | 22 | 2013-03-03 | $342,000 | 9497 | q.flynn@datatables.net |
| 查德 | 馬歇爾 | 地區總監 | 舊金山 | 36 | 2008-10-16 | $470,600 | 6741 | c.marshall@datatables.net |
| 海莉 | 肯尼迪 | 資深行銷設計師 | 倫敦 | 43 | 2012-12-18 | $313,500 | 3597 | h.kennedy@datatables.net |
| 塔蒂亞娜 | 費茲派翠克 | 地區總監 | 倫敦 | 19 | 2010-03-17 | $385,750 | 1965 | t.fitzpatrick@datatables.net |
| 麥可 | 席爾瓦 | 行銷設計師 | 倫敦 | 66 | 2012-11-27 | $198,500 | 1581 | m.silva@datatables.net |
| 保羅 | 拜爾德 | 財務長 (CFO) | 紐約 | 64 | 2010-06-09 | $725,000 | 3059 | p.byrd@datatables.net |
| 葛洛麗亞 | 利特爾 | 系統管理員 | 紐約 | 59 | 2009-04-10 | $237,500 | 1721 | g.little@datatables.net |
| 布萊德利 | 格里爾 | 軟體工程師 | 倫敦 | 41 | 2012-10-13 | $132,000 | 2558 | b.greer@datatables.net |
| 戴 | 里歐斯 | 人事主管 | 愛丁堡 | 35 | 2012-09-26 | $217,500 | 2290 | d.rios@datatables.net |
| 珍妮特 | 考德威爾 | 開發主管 | 紐約 | 30 | 2011-09-03 | $345,000 | 1937 | j.caldwell@datatables.net |
| 尤里 | 貝瑞 | 行銷長 (CMO) | 紐約 | 40 | 2009-06-25 | $675,000 | 6154 | y.berry@datatables.net |
| 凱撒 | 凡斯 | 售前支援 | 紐約 | 21 | 2011-12-12 | $106,450 | 8330 | c.vance@datatables.net |
| 桃樂絲 | 懷爾德 | 銷售助理 | 雪梨 | 23 | 2010-09-20 | $85,600 | 3023 | d.wilder@datatables.net |
| 安潔莉卡 | 拉莫斯 | 執行長 (CEO) | 倫敦 | 47 | 2009-10-09 | $1,200,000 | 5797 | a.ramos@datatables.net |
| 加文 | 喬伊斯 | 開發人員 | 愛丁堡 | 42 | 2010-12-22 | $92,575 | 8822 | g.joyce@datatables.net |
| 珍妮佛 | 張 | 地區總監 | 新加坡 | 28 | 2010-11-14 | $357,650 | 9239 | j.chang@datatables.net |
| 布蘭登 | 華格納 | 軟體工程師 | 舊金山 | 28 | 2011-06-07 | $206,850 | 1314 | b.wagner@datatables.net |
| 費歐娜 | 格林 | 營運長 (COO) | 舊金山 | 48 | 2010-03-11 | $850,000 | 2947 | f.green@datatables.net |
| 守 | 伊東 | 區域行銷 | 東京 | 20 | 2011-08-14 | $163,000 | 8899 | s.itou@datatables.net |
| 蜜雪兒 | 豪斯 | 整合專家 | 雪梨 | 37 | 2011-06-02 | $95,400 | 2769 | m.house@datatables.net |
| 蘇琪 | 柏克斯 | 開發人員 | 倫敦 | 53 | 2009-10-22 | $114,500 | 6832 | s.burks@datatables.net |
| 普雷斯科特 | 巴特利特 | 技術作者 | 倫敦 | 27 | 2011-05-07 | $145,000 | 3606 | p.bartlett@datatables.net |
| 加文 | 科爾特斯 | 團隊領導 | 舊金山 | 22 | 2008-10-26 | $235,500 | 2860 | g.cortez@datatables.net |
| 瑪蒂娜 | 麥克雷 | 售後支援 | 愛丁堡 | 46 | 2011-03-09 | $324,050 | 8240 | m.mccray@datatables.net |
| 尤妮蒂 | 巴特勒 | 行銷設計師 | 舊金山 | 47 | 2009-12-09 | $85,675 | 5384 | u.butler@datatables.net |
| 霍華 | 海特菲爾德 | 辦公室經理 | 舊金山 | 51 | 2008-12-16 | $164,500 | 7031 | h.hatfield@datatables.net |
| 霍普 | 富恩特斯 | 秘書 | 舊金山 | 41 | 2010-02-12 | $109,850 | 6318 | h.fuentes@datatables.net |
| 薇薇安 | 哈雷爾 | 財務總監 | 舊金山 | 62 | 2009-02-14 | $452,500 | 9422 | v.harrell@datatables.net |
| 提摩西 | 穆尼 | 辦公室經理 | 倫敦 | 37 | 2008-12-11 | $136,200 | 7580 | t.mooney@datatables.net |
| 傑克森 | 布萊德蕭 | 總監 | 紐約 | 65 | 2008-09-26 | $645,750 | 1042 | j.bradshaw@datatables.net |
| 奧莉維亞 | 梁 | 支援工程師 | 新加坡 | 64 | 2011-02-03 | $234,500 | 2120 | o.liang@datatables.net |
| 布魯諾 | 納什 | 軟體工程師 | 倫敦 | 38 | 2011-05-03 | $163,500 | 6222 | b.nash@datatables.net |
| 櫻 | 山本 | 支援工程師 | 東京 | 37 | 2009-08-19 | $139,575 | 9383 | s.yamamoto@datatables.net |
| 索爾 | 沃爾頓 | 開發人員 | 紐約 | 61 | 2013-08-11 | $98,540 | 8327 | t.walton@datatables.net |
| 芬恩 | 卡馬喬 | 支援工程師 | 舊金山 | 47 | 2009-07-07 | $87,500 | 2927 | f.camacho@datatables.net |
| 賽吉 | 鮑德溫 | 資料協調員 | 新加坡 | 64 | 2012-04-09 | $138,575 | 8352 | s.baldwin@datatables.net |
| 澤奈達 | 法蘭克 | 軟體工程師 | 紐約 | 63 | 2010-01-04 | $125,250 | 7439 | z.frank@datatables.net |
| 佐麗塔 | 塞拉諾 | 軟體工程師 | 舊金山 | 56 | 2012-06-01 | $115,000 | 4389 | z.serrano@datatables.net |
| 珍妮佛 | 阿科斯塔 | 初級 JavaScript 開發人員 | 愛丁堡 | 43 | 2013-02-01 | $75,650 | 3431 | j.acosta@datatables.net |
| 卡拉 | 史蒂文斯 | 銷售助理 | 紐約 | 46 | 2011-12-06 | $145,600 | 3990 | c.stevens@datatables.net |
| 妙麗 | 巴特勒 | 地區總監 | 倫敦 | 47 | 2011-03-21 | $356,250 | 1016 | h.butler@datatables.net |
| 萊爾 | 格里爾 | 系統管理員 | 倫敦 | 21 | 2009-02-27 | $103,500 | 6733 | l.greer@datatables.net |
| 喬納斯 | 亞歷山大 | 開發人員 | 舊金山 | 30 | 2010-07-14 | $86,500 | 8196 | j.alexander@datatables.net |
| 沙德 | 戴克 | 地區總監 | 愛丁堡 | 51 | 2008-11-13 | $183,000 | 6373 | s.decker@datatables.net |
| 麥可 | 布魯斯 | JavaScript 開發人員 | 新加坡 | 29 | 2011-06-27 | $183,000 | 5384 | m.bruce@datatables.net |
| 唐娜 | 史奈德 | 客戶支援 | 紐約 | 27 | 2011-01-25 | $112,000 | 4226 | d.snider@datatables.net |
- JavaScript
- HTML
- CSS
- Ajax
- 伺服器端指令碼
- 評論
以下顯示的 JavaScript 用於初始化此範例中顯示的表格
$('#example').DataTable({ responsive: true });
new DataTable('#example', { responsive: true });
除了上述程式碼之外，還載入了以下 JavaScript 函式庫檔案以用於此範例
以下顯示的 HTML 是原始 HTML 表格元素，在它被 DataTables 增強之前
此範例使用了一些額外的 CSS，超出從函式庫檔案 (如下) 載入的 CSS，以便正確顯示表格。 下面顯示了使用的額外 CSS
以下 CSS 函式庫檔案已載入以用於此範例，以提供表格的樣式
此表格透過 Ajax 載入資料。 下面顯示了已載入的最新資料。 當載入任何其他資料時，此資料將自動更新。
下面顯示了用於執行此表格伺服器端處理的指令碼。 請注意，這只是一個使用 PHP 的範例指令碼。 伺服器端處理指令碼可以使用任何語言編寫，使用 DataTables 文件中描述的協定。