欄位選擇器

自動填入功能可以透過 autoFill.columns 選項來決定應啟用哪些欄位。這將接受 column-selector 資料類型允許的任何值,例如欄位索引的陣列、類別名稱,或者如此範例中所示的 jQuery 選擇器。

如果表格包含非資料欄位,則此從自動填入動作中排除欄位的功能特別有用。此範例使用 DataTables 的選取擴充套件,透過 select 選項允許列選取,並且將列選取限制在第一欄。因此,我們不希望在該欄位上使用自動填入,而 autoFill.columns 的選擇器 :not(:first-child) 可以實現這一點。

將自動填入與 Editor(以及其他擴充套件,例如 列重排鍵盤導覽)結合使用,可以為最終使用者建立強大的資料編輯環境。

姓名 職位 辦公室 年齡 薪資
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({ autoFill: { columns: ':not(:first-child)' }, columnDefs: [ { orderable: false, className: 'select-checkbox', targets: 0 } ], order: [[1, 'asc']], select: { style: 'os', selector: 'td:first-child' } });
new DataTable('#example', { autoFill: { columns: ':not(:first-child)' }, columnDefs: [ { orderable: false, className: 'select-checkbox', targets: 0 } ], order: [[1, 'asc']], select: { style: 'os', selector: 'td:first-child' } });

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

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

    此範例使用了一些超出函式庫檔案(如下所示)載入的額外 CSS,以便正確顯示表格。使用的額外 CSS 如下所示

    為了提供表格樣式,會載入下列 CSS 函式庫檔案以供此範例使用

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

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

      其他範例