停用標題核取方塊

核取方塊欄類型會自動在欄的標題儲存格中插入一個核取方塊,該核取方塊會顯示表格中所有列的核取狀態摘要,並提供一種讓最終使用者快速選取/取消選取目前頁面中的所有列或表格中所有列的方式,具體取決於值。

可以使用 select.headerCheckbox 選項停用此核取方塊。當啟用伺服器端處理時,這特別有用,因為全選動作實際上只會選取目前頁面的列。預設情況下會啟用標題核取方塊,因此此範例示範如何停用它。

名稱 職位 辦公室 年齡 薪資
Tiger Nixon 系統架構師 愛丁堡 61 $320,800
Garrett Winters 會計師 東京 63 $170,750
Ashton Cox 初級技術作者 舊金山 66 $86,000
Cedric Kelly 資深 Javascript 開發人員 愛丁堡 22 $433,060
Airi Satou 會計師 東京 33 $162,700
Brielle Williamson 整合專員 紐約 61 $372,000
Herrod Chandler 銷售助理 舊金山 59 $137,500
Rhona Davidson 整合專員 東京 55 $327,900
Colleen Hurst Javascript 開發人員 舊金山 39 $205,500
Sonya Frost 軟體工程師 愛丁堡 23 $103,600
Jena Gaines 辦公室經理 倫敦 30 $90,560
Quinn Flynn 支援主管 愛丁堡 22 $342,000
Charde Marshall 區域總監 舊金山 36 $470,600
Haley Kennedy 資深行銷設計師 倫敦 43 $313,500
Tatyana Fitzpatrick 區域總監 倫敦 19 $385,750
Michael Silva 行銷設計師 倫敦 66 $198,500
Paul Byrd 財務長 (CFO) 紐約 64 $725,000
Gloria Little 系統管理員 紐約 59 $237,500
Bradley Greer 軟體工程師 倫敦 41 $132,000
Dai Rios 人事主管 愛丁堡 35 $217,500
Jenette Caldwell 開發主管 紐約 30 $345,000
Yuri Berry 行銷長 (CMO) 紐約 40 $675,000
Caesar Vance 售前支援 紐約 21 $106,450
Doris Wilder 銷售助理 雪梨 23 $85,600
Angelica Ramos 執行長 (CEO) 倫敦 47 $1,200,000
Gavin Joyce 開發人員 愛丁堡 42 $92,575
Jennifer Chang 區域總監 新加坡 28 $357,650
Brenden Wagner 軟體工程師 舊金山 28 $206,850
Fiona Green 營運長 (COO) 舊金山 48 $850,000
Shou Itou 區域行銷 東京 20 $163,000
Michelle House 整合專員 雪梨 37 $95,400
Suki Burks 開發人員 倫敦 53 $114,500
Prescott Bartlett 技術作者 倫敦 27 $145,000
Gavin Cortez 團隊領導 舊金山 22 $235,500
Martena Mccray 售後支援 愛丁堡 46 $324,050
Unity Butler 行銷設計師 舊金山 47 $85,675
Howard Hatfield 辦公室經理 舊金山 51 $164,500
Hope Fuentes 秘書 舊金山 41 $109,850
Vivian Harrell 財務主管 舊金山 62 $452,500
Timothy Mooney 辦公室經理 倫敦 37 $136,200
Jackson Bradshaw 董事 紐約 65 $645,750
Olivia Liang 支援工程師 新加坡 64 $234,500
Bruno Nash 軟體工程師 倫敦 38 $163,500
Sakura Yamamoto 支援工程師 東京 37 $139,575
Thor Walton 開發人員 紐約 61 $98,540
Finn Camacho 支援工程師 舊金山 47 $87,500
Serge Baldwin 資料協調員 新加坡 64 $138,575
Zenaida Frank 軟體工程師 紐約 63 $125,250
Zorita Serrano 軟體工程師 舊金山 56 $115,000
Jennifer Acosta 初級 Javascript 開發人員 愛丁堡 43 $75,650
Cara Stevens 銷售助理 紐約 46 $145,600
Hermione Butler 區域總監 倫敦 47 $356,250
Lael Greer 系統管理員 倫敦 21 $103,500
Jonas Alexander 開發人員 舊金山 30 $86,500
Shad Decker 區域總監 愛丁堡 51 $183,000
Michael Bruce Javascript 開發人員 新加坡 29 $183,000
Donna Snider 客戶支援 紐約 27 $112,000
名稱 職位 辦公室 年齡 薪資
  • Javascript
  • HTML
  • CSS
  • Ajax
  • 伺服器端腳本
  • 註解

以下顯示的 Javascript 用於初始化此範例中顯示的表格

$('#example').DataTable({ columnDefs: [ { orderable: false, render: DataTable.render.select(), targets: 0 } ], select: { style: 'os', selector: 'td:first-child', headerCheckbox: false }, order: [[1, 'asc']] });
new DataTable('#example', { columnDefs: [ { orderable: false, render: DataTable.render.select(), targets: 0 } ], select: { style: 'os', selector: 'td:first-child', headerCheckbox: false }, order: [[1, 'asc']] });

除了上述程式碼之外,還會載入下列 Javascript 程式庫檔案,以便在此範例中使用

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

    此範例除了從程式庫檔案載入的 CSS 之外(如下所示),還使用了一些額外的 CSS,以便正確顯示表格。下面顯示了使用的額外 CSS

    載入以下 CSS 程式庫檔案,以便在此範例中使用,以提供表格的樣式

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

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

      其他範例