排序外掛程式(無類型偵測)

雖然 DataTables 會使用內建方法排序許多資料類型,但在處理更複雜的格式化資料時,可能需要自行定義排序順序。 使用外掛程式排序功能,您可以讓 DataTables 以您希望的任何方式排序資料。

這是透過結合使用 columns.type 參數和排序外掛程式來完成的。 排序外掛程式可以有任何複雜程度(例如,自然排序可能相當複雜,但也非常強大),並透過附加到 DataTable.ext.type.order 物件來定義。 有關排序外掛程式、建立它們及其要求的更多資訊,請參考外掛程式開發文件。

此範例顯示使用列舉類型進行排序。

DataTables 外掛程式頁面上可以找到各式各樣的現成排序外掛程式。

姓名 職位 辦公室 年齡 開始日期 薪資
Tiger Nixon 系統架構師 愛丁堡 61 2011-04-25
Garrett Winters 會計師 東京 63 2011-07-25
Ashton Cox 初級技術作者 舊金山 66 2009-01-12
Cedric Kelly 資深 JavaScript 開發人員 愛丁堡 22 2012-03-29
Airi Satou 會計師 東京 33 2008-11-28
Brielle Williamson 整合專員 紐約 61 2012-12-02
Herrod Chandler 銷售助理 舊金山 59 2012-08-06
Rhona Davidson 整合專員 東京 55 2010-10-14
Colleen Hurst JavaScript 開發人員 舊金山 39 2009-09-15
Sonya Frost 軟體工程師 愛丁堡 23 2008-12-13
Jena Gaines 辦公室經理 倫敦 30 2008-12-19
Quinn Flynn 支援主管 愛丁堡 22 2013-03-03
Charde Marshall 區域總監 舊金山 36 2008-10-16
Haley Kennedy 資深行銷設計師 倫敦 43 2012-12-18
Tatyana Fitzpatrick 區域總監 倫敦 19 2010-03-17
Michael Silva 行銷設計師 倫敦 66 2012-11-27
Paul Byrd 財務長(CFO) 紐約 64 2010-06-09
Gloria Little 系統管理員 紐約 59 2009-04-10
Bradley Greer 軟體工程師 倫敦 41 2012-10-13
Dai Rios 人事主管 愛丁堡 35 2012-09-26
Jenette Caldwell 開發主管 紐約 30 2011-09-03
Yuri Berry 行銷長(CMO) 紐約 40 2009-06-25
Caesar Vance 售前支援 紐約 21 2011-12-12
Doris Wilder 銷售助理 雪梨 23 2010-09-20
Angelica Ramos 執行長(CEO) 倫敦 47 2009-10-09
Gavin Joyce 開發人員 愛丁堡 42 2010-12-22
Jennifer Chang 區域總監 新加坡 28 2010-11-14
Brenden Wagner 軟體工程師 舊金山 28 2011-06-07
Fiona Green 營運長(COO) 舊金山 48 2010-03-11
Shou Itou 區域行銷 東京 20 2011-08-14
Michelle House 整合專員 雪梨 37 2011-06-02
Suki Burks 開發人員 倫敦 53 2009-10-22
Prescott Bartlett 技術作者 倫敦 27 2011-05-07
Gavin Cortez 團隊領導 舊金山 22 2008-10-26
Martena Mccray 售後支援 愛丁堡 46 2011-03-09
Unity Butler 行銷設計師 舊金山 47 2009-12-09
Howard Hatfield 辦公室經理 舊金山 51 2008-12-16
Hope Fuentes 秘書 舊金山 41 2010-02-12
Vivian Harrell 財務總監 舊金山 62 2009-02-14
Timothy Mooney 辦公室經理 倫敦 37 2008-12-11
Jackson Bradshaw 總監 紐約 65 2008-09-26
Olivia Liang 支援工程師 新加坡 64 2011-02-03
Bruno Nash 軟體工程師 倫敦 38 2011-05-03
Sakura Yamamoto 支援工程師 東京 37 2009-08-19
Thor Walton 開發人員 紐約 61 2013-08-11
Finn Camacho 支援工程師 舊金山 47 2009-07-07
Serge Baldwin 資料協調員 新加坡 64 2012-04-09
Zenaida Frank 軟體工程師 紐約 63 2010-01-04
Zorita Serrano 軟體工程師 舊金山 56 2012-06-01
Jennifer Acosta 初級 JavaScript 開發人員 愛丁堡 43 2013-02-01
Cara Stevens 銷售助理 紐約 46 2011-12-06
Hermione Butler 區域總監 倫敦 47 2011-03-21
Lael Greer 系統管理員 倫敦 21 2009-02-27
Jonas Alexander 開發人員 舊金山 30 2010-07-14
Shad Decker 區域總監 愛丁堡 51 2008-11-13
Michael Bruce JavaScript 開發人員 新加坡 29 2011-06-27
Donna Snider 客戶支援 紐約 27 2011-01-25
姓名 職位 辦公室 年齡 開始日期 薪資
  • JavaScript
  • HTML
  • CSS
  • Ajax
  • 伺服器端腳本
  • 註解

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

DataTable.ext.type.order['salary-grade-pre'] = function (d) { switch (d) { case 'Low': return 1; case 'Medium': return 2; case 'High': return 3; } return 0; }; $('#example').DataTable({ columnDefs: [ { type: 'salary-grade', targets: -1 } ] });
DataTable.ext.type.order['salary-grade-pre'] = function (d) { switch (d) { case 'Low': return 1; case 'Medium': return 2; case 'High': return 3; } return 0; }; new DataTable('#example', { columnDefs: [ { type: 'salary-grade', targets: -1 } ] });

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

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

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

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

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

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

      其他範例