DataTables
進階互動
表格功能。
Editor
適用於 DataTables 的
完整編輯函式庫。
手冊
下載
≡ 顯示網站導覽

jQuery UI 模態視窗

這個範例展示了 responsive.details.display 選項與 modal 選項搭配使用，當與 Responsive 的 jQuery UI 整合一起使用時，將會使用 jQuery UI 原生的模態視窗顯示。

內建的 modal 顯示選項應該作為一個函數執行，並帶有可選的參數來控制模態視窗的行為。在 jQuery UI 的情況下，它有一個 header 選項（這是一個應該返回模態視窗標題的函數）和一個 modal 選項，它是一個 設定參數 的物件，將會傳遞給 jQuery UI 模態視窗。

此外，此處使用 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。