總是確認操作
當最終使用者完成自動填滿時,AutoFill 會判斷有多少資料填滿外掛程式可用於已拖曳的資料。 如果有多個選項,它會向最終使用者顯示這些選項的列表,讓他們選擇要執行的操作 - 還會顯示一個取消按鈕。
預設情況下,如果只有一個單一的資料填滿外掛程式可以對資料進行操作,它會立即執行,無需最終使用者確認,也無法取消操作。
可以使用 autoFill.alwaysAsk
選項來強制 AutoFill 確認要執行的操作,即使只有一個選項也是如此。 這讓最終使用者在拖曳過程中犯錯時能夠取消操作。 此範例顯示 autoFill.alwaysAsk
設定為 true
- 為了展示,請嘗試自動填滿單行或單列。
姓名 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 |
---|---|---|---|---|---|
Tiger Nixon | 系統架構師 | 愛丁堡 | 61 | 2011-04-25 | $320,800 |
Garrett Winters | 會計 | 東京 | 63 | 2011-07-25 | $170,750 |
Ashton Cox | 初級技術作者 | 舊金山 | 66 | 2009-01-12 | $86,000 |
Cedric Kelly | 資深 Javascript 開發人員 | 愛丁堡 | 22 | 2012-03-29 | $433,060 |
Airi Satou | 會計 | 東京 | 33 | 2008-11-28 | $162,700 |
Brielle Williamson | 整合專員 | 紐約 | 61 | 2012-12-02 | $372,000 |
Herrod Chandler | 銷售助理 | 舊金山 | 59 | 2012-08-06 | $137,500 |
Rhona Davidson | 整合專員 | 東京 | 55 | 2010-10-14 | $327,900 |
Colleen Hurst | Javascript 開發人員 | 舊金山 | 39 | 2009-09-15 | $205,500 |
Sonya Frost | 軟體工程師 | 愛丁堡 | 23 | 2008-12-13 | $103,600 |
Jena Gaines | 辦公室經理 | 倫敦 | 30 | 2008-12-19 | $90,560 |
Quinn Flynn | 支援主管 | 愛丁堡 | 22 | 2013-03-03 | $342,000 |
Charde Marshall | 區域主管 | 舊金山 | 36 | 2008-10-16 | $470,600 |
Haley Kennedy | 資深行銷設計師 | 倫敦 | 43 | 2012-12-18 | $313,500 |
Tatyana Fitzpatrick | 區域主管 | 倫敦 | 19 | 2010-03-17 | $385,750 |
Michael Silva | 行銷設計師 | 倫敦 | 66 | 2012-11-27 | $198,500 |
Paul Byrd | 財務長 (CFO) | 紐約 | 64 | 2010-06-09 | $725,000 |
Gloria Little | 系統管理員 | 紐約 | 59 | 2009-04-10 | $237,500 |
Bradley Greer | 軟體工程師 | 倫敦 | 41 | 2012-10-13 | $132,000 |
Dai Rios | 人事主管 | 愛丁堡 | 35 | 2012-09-26 | $217,500 |
Jenette Caldwell | 開發主管 | 紐約 | 30 | 2011-09-03 | $345,000 |
Yuri Berry | 行銷長 (CMO) | 紐約 | 40 | 2009-06-25 | $675,000 |
Caesar Vance | 售前支援 | 紐約 | 21 | 2011-12-12 | $106,450 |
Doris Wilder | 銷售助理 | 雪梨 | 23 | 2010-09-20 | $85,600 |
Angelica Ramos | 執行長 (CEO) | 倫敦 | 47 | 2009-10-09 | $1,200,000 |
Gavin Joyce | 開發人員 | 愛丁堡 | 42 | 2010-12-22 | $92,575 |
Jennifer Chang | 區域主管 | 新加坡 | 28 | 2010-11-14 | $357,650 |
Brenden Wagner | 軟體工程師 | 舊金山 | 28 | 2011-06-07 | $206,850 |
Fiona Green | 營運長 (COO) | 舊金山 | 48 | 2010-03-11 | $850,000 |
Shou Itou | 區域行銷 | 東京 | 20 | 2011-08-14 | $163,000 |
Michelle House | 整合專員 | 雪梨 | 37 | 2011-06-02 | $95,400 |
Suki Burks | 開發人員 | 倫敦 | 53 | 2009-10-22 | $114,500 |
Prescott Bartlett | 技術作者 | 倫敦 | 27 | 2011-05-07 | $145,000 |
Gavin Cortez | 團隊領導 | 舊金山 | 22 | 2008-10-26 | $235,500 |
Martena Mccray | 售後支援 | 愛丁堡 | 46 | 2011-03-09 | $324,050 |
Unity Butler | 行銷設計師 | 舊金山 | 47 | 2009-12-09 | $85,675 |
Howard Hatfield | 辦公室經理 | 舊金山 | 51 | 2008-12-16 | $164,500 |
Hope Fuentes | 秘書 | 舊金山 | 41 | 2010-02-12 | $109,850 |
Vivian Harrell | 財務總監 | 舊金山 | 62 | 2009-02-14 | $452,500 |
Timothy Mooney | 辦公室經理 | 倫敦 | 37 | 2008-12-11 | $136,200 |
Jackson Bradshaw | 總監 | 紐約 | 65 | 2008-09-26 | $645,750 |
Olivia Liang | 支援工程師 | 新加坡 | 64 | 2011-02-03 | $234,500 |
Bruno Nash | 軟體工程師 | 倫敦 | 38 | 2011-05-03 | $163,500 |
Sakura Yamamoto | 支援工程師 | 東京 | 37 | 2009-08-19 | $139,575 |
Thor Walton | 開發人員 | 紐約 | 61 | 2013-08-11 | $98,540 |
Finn Camacho | 支援工程師 | 舊金山 | 47 | 2009-07-07 | $87,500 |
Serge Baldwin | 資料協調員 | 新加坡 | 64 | 2012-04-09 | $138,575 |
Zenaida Frank | 軟體工程師 | 紐約 | 63 | 2010-01-04 | $125,250 |
Zorita Serrano | 軟體工程師 | 舊金山 | 56 | 2012-06-01 | $115,000 |
Jennifer Acosta | 初級 Javascript 開發人員 | 愛丁堡 | 43 | 2013-02-01 | $75,650 |
Cara Stevens | 銷售助理 | 紐約 | 46 | 2011-12-06 | $145,600 |
Hermione Butler | 區域主管 | 倫敦 | 47 | 2011-03-21 | $356,250 |
Lael Greer | 系統管理員 | 倫敦 | 21 | 2009-02-27 | $103,500 |
Jonas Alexander | 開發人員 | 舊金山 | 30 | 2010-07-14 | $86,500 |
Shad Decker | 區域主管 | 愛丁堡 | 51 | 2008-11-13 | $183,000 |
Michael Bruce | Javascript 開發人員 | 新加坡 | 29 | 2011-06-27 | $183,000 |
Donna Snider | 客戶支援 | 紐約 | 27 | 2011-01-25 | $112,000 |
姓名 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端指令碼
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ autoFill: { alwaysAsk: true } });
new DataTable('#example', { autoFill: { alwaysAsk: true } });
除了上述程式碼之外,還會載入以下 Javascript 程式庫檔案以在此範例中使用
以下顯示的 HTML 是原始的 HTML 表格元素,在經過 DataTables 增強之前
此範例使用了一些除了從程式庫檔案載入的額外 CSS (如下所示),以便正確顯示表格。 使用的額外 CSS 如下所示
以下 CSS 程式庫檔案已載入以在此範例中使用,以提供表格的樣式
此表格透過 Ajax 載入資料。 以下顯示已載入的最新資料。 當載入任何其他資料時,此資料將自動更新。
以下顯示用於執行此表格的伺服器端處理的指令碼。 請注意,這只是一個使用 PHP 的範例指令碼。 伺服器端處理指令碼可以使用任何語言編寫,使用 DataTables 文件中描述的協定。