DataTables
進階互動
您的表格功能。
編輯器
全面的編輯
DataTables 的函式庫。
手冊
下載
≡ 顯示網站導覽

Foundation 模態視窗

此範例顯示 responsive.details.display 選項與 modal 選項一起使用，當與 Foundation 的響應式整合一起使用時，將使用 Foundation 的原生模態視窗顯示。

內建的 modal 顯示選項應作為一個函數執行，並傳入可選參數來控制模態視窗顯示的行為。就 Foundation 而言，它只有一個 header 選項，這是一個應返回模態視窗標題的函數。如果您不希望顯示標題，請不要使用此選項。

此外，這裡使用 responsive.details.renderer 選項來顯示該列的完整數據，而不僅僅是隱藏的欄位（這是預設行為），因為這樣在模態視窗中看起來會更好！

名字 姓氏 職位 辦公室 年齡 開始日期 薪資 分機 電子郵件
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({ responsive: { details: { display: DataTable.Responsive.display.modal({ header: function (row) { var data = row.data(); return '詳細資訊 ' + data[0] + ' ' + data[1]; } }), renderer: DataTable.Responsive.renderer.tableAll() } } });
new DataTable('#example', { responsive: { details: { display: DataTable.Responsive.display.modal({ header: function (row) { var data = row.data(); return '詳細資訊 ' + data[0] + ' ' + data[1]; } }), renderer: DataTable.Responsive.renderer.tableAll() } } });

除了上述程式碼之外，還載入了以下 JavaScript 函式庫檔案以供此範例使用

    以下顯示的 HTML 是原始 HTML 表格元素，在 DataTables 增強之前

    此範例使用了一些除了從函式庫檔案（如下）載入之外的額外 CSS，以便正確顯示表格。以下顯示使用的額外 CSS

    載入以下 CSS 函式庫檔案，以供此範例中使用，以提供表格的樣式

      此表格通過 Ajax 載入數據。以下顯示已載入的最新數據。當載入任何額外數據時，此數據將自動更新。

      以下顯示用於執行此表格的伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。

      其他範例

      基本初始化

      顯示類型

      欄位控制

      子列

      樣式

      DataTables

      DataTables 由 SpryMedia Ltd 設計和建立。
      © 2007-2024 MIT 授權。 隱私權政策。 贊助者。
      SpryMedia Ltd 在蘇格蘭註冊，公司編號 SC456502。