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

立即顯示隱藏的詳細資訊

Responsive 能夠以多種不同的方式顯示它所隱藏的詳細資訊。其預設值是允許終端使用者透過點擊一列並在 DataTables 子列中顯示資訊來切換顯示。有時，不需要終端使用者互動即可響應式地顯示隱藏的資料會很有用，這可以使用 childRowImmediate 顯示類型來完成。

顯示類型是使用 responsive.details.display 選項設定，該選項應指向將處理子列顯示的函式。內建選項可在 $.fn.dataTable.Responsive.display 物件中找到。有關可用選項的完整列表，請參閱 responsive.details.display。

此外，在此範例中，responsive.details.type 選項設定為 none，以隱藏 Responsive 預設會顯示的顯示/隱藏圖示。同時使用的還有 responsive.details.target，它設定為空字串，停用使用者切換子列的能力 - 也就是說，在此範例中，表格的完整內容始終可見。如果您想保留該能力，則可以移除此設定。

名字 姓氏 職位 辦公室 年齡 開始日期 薪資 分機 電子郵件
老虎 尼克森 系統架構師 愛丁堡 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: { details: { display: DataTable.Responsive.display.childRowImmediate, target: '', type: 'none' } } });
new DataTable('#example', { responsive: { details: { display: DataTable.Responsive.display.childRowImmediate, target: '', type: 'none' } } });

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

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

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

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

      此表格透過 Ajax 載入資料。下方顯示的是已載入的最新資料。當載入任何其他資料時，此資料將自動更新。

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

      其他範例

      基本初始化

      顯示類型

      欄位控制

      子列

      樣式

      DataTables

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