2014 年 12 月 18 日 星期四
終極日期/時間排序外掛程式
日期和時間可以用幾乎無限種方式表示，使用不同的格式向終端使用者顯示資料點。例如，在空間不受限制的情況下可能會使用「2014 年 12 月 18 日 星期四」這樣的長格式，但根據您的所在地，更簡潔的格式可能是「18/12/2014」或「12/18/2014」！當嘗試排序時間資料時，這種模糊性可能會導致嚴重的問題。
關於如何正確排序時間資料的問題在論壇中很常見，在這篇文章中，我將介紹一個新的 DataTables 外掛程式，它可以使用優秀的 Moment.js 函式庫，正確排序幾乎任何日期/時間格式。
對於彈性解決方案的需求
DataTables 內建了許多不同的資料類型偵測和排序方法，包括貨幣、百分比值和日期。日期方法使用 Javascript 規範中的Date() 物件來讀取日期格式化的資料。這是使用 Date.parse() 完成的，但是每個瀏覽器支援的日期格式差異很大。最初，Date 規範不要求支援任何特定格式（自 ECMAScript 5.1 以來，這已變更為要求 ISO 8601），但是所有瀏覽器都已統一支援 ISO 8601，使其成為唯一可靠的格式。其他格式則根據瀏覽器而有所不同。
儘管 ISO 8061 沒有歧義，但問題在於它很少是您想向終端使用者顯示的格式。因此，多年來，許多排序特定日期/時間資訊的外掛程式已被各種作者編寫並貢獻給 DataTables 社群（也可以使用正交資料）。
這樣做的缺點是，對於格式的每個細微變化，您都需要建立新的外掛程式。為了解決這個問題並提供完整的彈性，我們希望能夠指定 DataTables 會自動偵測和排序的格式。
有很多函式庫可用於彌補 Date() 中的不足，例如Sugar、Datejs 和 date.format，但是在這個範例中，我們將使用 Moment.js，它提供了廣泛的格式化選項（如果您希望使用它們，也可以將任何其他函式庫與本文中介紹的技術一起使用！）。
運作方式
使用這個 DataTables 的「終極」日期/時間排序外掛程式就像在您的頁面上包含它（以及 Moment.js）一樣簡單，您可以使用 DataTables CDN 來完成（或者將其串聯到您的其他 Javascript 檔案中以提高載入效能！）
JS
JS
然後，使用 $.fn.dataTable.moment( format, locale ) 方法註冊您希望 DataTables 偵測和排序的日期/時間格式，該方法最多接受兩個參數
format- 要偵測和排序的日期/時間格式 - 可用的選項在 Moment.js 文件中定義。locale（選用） - Moment.js 具有廣泛的國際化支援。這個選項可以選用來指定語言環境。
範例
考慮以下包含兩個日期欄位的 DataTable。一個格式為 HH:mm MMM D, YY，另一個格式為 dddd, MMMM Do, YYYY（您通常不會有兩種如此不同的格式，但這只是為了範例！）。為了建立 DataTable，我們使用上面定義的 $.fn.dataTable.moment() 函式和標準的 DataTables 建立
$(document).ready(function() {
$.fn.dataTable.moment( 'HH:mm MMM D, YY' );
$.fn.dataTable.moment( 'dddd, MMMM Do, YYYY' );
$('#example').DataTable();
} );
| 姓名 | 公司 | 建立時間 | 更新時間 |
|---|---|---|---|
| Dai Weeks | Eu Foundation | 11:10 10月 18, 14 | 週六, 5月 16日, 2015 |
| Jade Dale | Sit Amet Inc. | 07:04 4月 29, 14 | 週六, 7月 25日, 2015 |
| Melanie Buckner | Tempus Lorem LLC | 02:01 1月 28, 15 | 週日, 10月 11日, 2015 |
| Cyrus Haney | Phasellus Corp. | 10:01 1月 28, 14 | 週六, 12月 28日, 2013 |
| Melinda Salas | Molestie Sed Id Limited | 11:05 5月 1, 14 | 週五, 5月 15日, 2015 |
| Rebecca Cline | Eget Dictum Placerat Limited | 02:12 12月 20, 13 | 週三, 8月 6日, 2014 |
| India Lawson | Eget Company | 11:03 3月 21, 15 | 週五, 7月 11日, 2014 |
| Elvis Whitfield | Mollis Corporation | 08:07 7月 30, 15 | 週六, 2月 28日, 2015 |
| Castor Monroe | Iaculis LLC | 12:06 6月 22, 14 | 週一, 6月 2日, 2014 |
| Gareth Berry | Malesuada Corp. | 04:02 2月 26, 14 | 週五, 2月 27日, 2015 |
| Anne Knox | Neque Sed Consulting | 04:04 4月 11, 14 | 週六, 5月 24日, 2014 |
| Kasimir Martin | Tortor Nunc Consulting | 11:12 12月 24, 14 | 週六, 7月 25日, 2015 |
| Drake Pugh | Mattis Velit Industries | 03:09 9月 23, 15 | 週三, 3月 5日, 2014 |
| Carla Head | Pretium Aliquet Institute | 06:09 9月 2, 15 | 週三, 1月 8日, 2014 |
| Shellie Henry | Scelerisque Ltd | 11:01 1月 28, 15 | 週日, 2月 1日, 2015 |
| Patrick Koch | Scelerisque Dui LLC | 10:10 10月 3, 14 | 週日, 5月 17日, 2015 |
| Dara Roberts | Urna Convallis Erat Industries | 11:08 8月 13, 15 | 週日, 6月 22日, 2014 |
| Yuli Wright | Auctor Consulting | 05:07 7月 22, 14 | 週二, 3月 25日, 2014 |
| Cyrus Jensen | Et Risus Associates | 10:09 9月 19, 15 | 週六, 5月 16日, 2015 |
| Holmes Talley | Urna Nullam Lobortis Consulting | 01:12 12月 25, 14 | 週四, 2月 13日, 2014 |
| Iris Carver | Laoreet Lectus Quis LLC | 12:10 10月 13, 14 | 週五, 11月 7日, 2014 |
| Leroy Cantrell | In LLC | 03:05 5月 5, 15 | 週二, 6月 2日, 2015 |
| Maggie Aguilar | Mauris PC | 02:12 12月 7, 14 | 週四, 11月 20日, 2014 |
| Maggy Porter | Mauris Blandit Ltd | 11:06 6月 4, 14 | 週二, 11月 11日, 2014 |
| Liberty Warner | Ipsum Company | 05:11 11月 17, 15 | 週一, 10月 5日, 2015 |
| Raya Dean | Felis Foundation | 02:12 12月 18, 14 | 週一, 2月 10日, 2014 |
| Jack Juarez | Nunc Limited | 01:09 9月 7, 15 | 週一, 12月 22日, 2014 |
| Nola King | Varius Orci Incorporated | 04:05 5月 12, 15 | 週二, 6月 24日, 2014 |
| Carlos Holman | Odio LLC | 01:08 8月 16, 15 | 週四, 8月 20日, 2015 |
| Aquila Finch | Egestas Ligula Nullam Institute | 12:09 9月 3, 15 | 週六, 3月 22日, 2014 |
| Seth Porter | Sem Ut Inc. | 01:06 6月 4, 15 | 週日, 3月 1日, 2015 |
| Oleg Mcpherson | Nunc Ac Sem LLP | 03:08 8月 3, 14 | 週日, 9月 21日, 2014 |
| Kennan Snyder | Amet Consectetuer Associates | 06:01 1月 23, 14 | 週一, 4月 7日, 2014 |
| Emery Donovan | Dapibus Inc. | 08:06 6月 14, 14 | 週二, 9月 30日, 2014 |
| Naida Hunter | Augue Scelerisque Mollis Inc. | 11:12 12月 23, 13 | 週日, 7月 19日, 2015 |
| Clinton Morrison | Non Lacinia Industries | 02:03 3月 18, 14 | 週五, 3月 6日, 2015 |
| Helen Gutierrez | Faucibus Incorporated | 07:08 8月 7, 15 | 週二, 2月 4日, 2014 |
| Candice Bonner | Donec LLP | 05:12 12月 28, 13 | 週一, 3月 16日, 2015 |
| Nissim Carter | Suspendisse Sed Limited | 01:03 3月 19, 14 | 週一, 6月 29日, 2015 |
| Kasimir Hoffman | Id Libero Donec Consulting | 05:12 12月 23, 14 | 週三, 9月 23日, 2015 |
| Imogene Mcconnell | Vitae Associates | 07:02 2月 17, 15 | 週二, 7月 22日, 2014 |
| Sage Mosley | Metus In Inc. | 05:05 5月 24, 15 | 週一, 4月 21日, 2014 |
| Sybil Puckett | Vel Lectus LLP | 09:06 6月 9, 14 | 週六, 9月 6日, 2014 |
| Kylynn Solis | Ac Limited | 10:01 1月 20, 15 | 週二, 9月 15日, 2015 |
| Beatrice Hurley | Mauris A Nunc Corporation | 04:05 5月 11, 14 | 週日, 4月 26日, 2015 |
| Troy Marquez | Dapibus Quam Institute | 12:02 2月 7, 15 | 週四, 4月 23日, 2015 |
| Malcolm Payne | Adipiscing Ligula Institute | 04:08 8月 17, 15 | 週二, 9月 2日, 2014 |
| Wade Valenzuela | Sagittis Duis Gravida Corporation | 03:05 5月 22, 14 | 週一, 1月 13日, 2014 |
| Kathleen Gilmore | Urna Nec Ltd | 05:03 3月 5, 14 | 週一, 11月 16日, 2015 |
| Maite Scott | Ipsum Cursus Inc. | 01:05 5月 28, 14 | 週日, 6月 8日, 2014 |
| Kamal Nash | Sem Vitae Company | 05:10 10月 7, 14 | 週四, 6月 26日, 2014 |
| Iliana West | Ac Eleifend Limited | 01:10 10月 24, 15 | 週三, 7月 2日, 2014 |
| Susan Osborn | Sollicitudin Adipiscing Ligula Institute | 03:02 2月 18, 14 | 週六, 6月 13日, 2015 |
| Adena Carter | Nibh Industries | 04:01 1月 27, 15 | 週二, 2月 3日, 2015 |
| Duncan Mckinney | Vel Convallis In Inc. | 09:11 11月 23, 15 | 週六, 12月 12日, 2015 |
| Ariana Whitehead | Fermentum Metus Associates | 03:06 6月 9, 14 | 週二, 12月 15日, 2015 |
| Fiona Henderson | Eget Tincidunt Dui Inc. | 03:01 1月 1, 14 | 週五, 1月 9日, 2015 |
| Judah Gates | Donec Felis Associates | 04:11 11月 30, 15 | 週一, 9月 28日, 2015 |
| Hasad Mccarthy | Ac Tellus Company | 12:01 1月 21, 14 | 週一, 1月 27日, 2014 |
| Shay Valencia | Natoque Associates | 05:03 3月 4, 14 | 週一, 12月 15日, 2014 |
| Hillary Tran | Integer Mollis Foundation | 08:12 12月 31, 14 | 週三, 8月 26日, 2015 |
| Margaret Sellers | Lacus Quisque Corporation | 11:10 10月 17, 15 | 週日, 7月 5日, 2015 |
| Prescott Morton | Vestibulum Associates | 01:04 4月 27, 15 | 週日, 6月 14日, 2015 |
| Charity Gilbert | Tortor At Risus Associates | 01:07 7月 31, 14 | 週四, 12月 18日, 2014 |
| Freya Randolph | Ut Institute | 07:11 11月 3, 15 | 週六, 9月 27日, 2014 |
| Nita Howe | Ornare Fusce Inc. | 11:02 2月 12, 14 | 週二, 6月 9日, 2015 |
| Kirby Whitney | Faucibus Morbi Vehicula Foundation | 11:12 12月 22, 13 | 週三, 8月 26日, 2015 |
| Amos Jarvis | Mauris Suspendisse Aliquet LLP | 01:05 5月 10, 15 | 週一, 7月 14日, 2014 |
| Kim Hunter | Ligula Donec Luctus Corp. | 07:11 11月 25, 15 | 週四, 10月 23日, 2014 |
| Rosalyn Benton | Iaculis Quis Pede Corp. | 09月16日 14時02分 | 2015年11月15日 星期日 |
| 安喬莉·佛洛伊德 | 努恩克公司 | 03月28日 14時12分 | 2014年12月1日 星期一 |
| 貝索·哈蒙 | 塞姆佩·魯特魯姆·弗斯克電腦公司 | 12月9日 15時05分 | 2014年9月17日 星期三 |
| 科米特·赫雷拉 | 賽德·托特·因特格有限責任公司 | 09月26日 14時03分 | 週日, 6月 14日, 2015 |
| 溫妮弗雷德·皮爾森 | 奧格工業 | 09月18日 15時10分 | 2015年8月4日 星期二 |
| 萊斯特·費舍爾 | 艾尼安電腦公司 | 09月15日 15時02分 | 2015年7月29日 星期三 |
| 泰圖姆·道格蒂 | 努恩克·努拉有限責任合夥公司 | 06月25日 15時09分 | 2014年2月19日 星期三 |
| 扎卡里·懷爾德 | 尼克有限責任公司 | 09月19日 14時03分 | 2015年4月8日 星期三 |
| 萊斯·彼得斯 | 伊普索姆·里奧·埃萊門圖姆學院 | 06月17日 14時11分 | 2014年11月13日 星期四 |
| 伊芙琳·拉莫斯 | 努恩克工業 | 06月3日 14時01分 | 2014年4月10日 星期四 |
| 瑪拉·邁克爾 | 烏特·阿利奎姆有限責任公司 | 07月14日 14時10分 | 2015年11月26日 星期四 |
| 傑米瑪·鮑爾斯 | 歐·阿爾庫·莫比有限責任合夥公司 | 08月4日 14時06分 | 2015年5月1日 星期五 |
| 塔內克·格思里 | 席特聯合公司 | 02月19日 15時09分 | 2015年5月28日 星期四 |
| 哈里特·克蘭 | 奎斯·阿庫穆桑有限公司 | 08月2日 14時12分 | 2015年12月13日 星期日 |
| 金·邦德 | 奧克特·奎斯公司 | 08月25日 15時09分 | 2014年11月18日 星期二 |
| 爾莎·雅各布斯 | 康瓦利斯·安特電腦公司 | 04月5日 14時08分 | 2014年2月18日 星期二 |
| 傑森·科利爾 | 維爾·佩德·布蘭迪特有限公司 | 05月12日 14時01分 | 2015年9月21日 星期一 |
| 奎姆比·斯通 | 拉克絲·奎斯克股份有限公司 | 08月10日 15時09分 | 2015年7月2日 星期四 |
| 梅爾文·斯威特 | 尼克基金會 | 01月17日 15時05分 | 2014年5月22日 星期四 |
| 索爾·威爾遜 | 阿爾庫·維瓦姆斯·席特工業 | 02月17日 15時02分 | 2014年8月7日 星期四 |
| 伯頓·馬奎茲 | 奧格公司 | 12月2日 15時09分 | 2014年11月26日 星期三 |
| 凱·韋爾 | 法西里斯·維泰有限公司 | 06月23日 14時12分 | 2014年6月29日 星期日 |
| 霍姆斯·墨菲 | 杜伊·尼克·坦普斯公司 | 10月25日 15時12分 | 週日, 4月 26日, 2015 |
| 布萊恩·瓦倫丁 | 普羅因學院 | 10月16日 14時04分 | 2015年3月30日 星期一 |
| 萊昂內爾·帕切科 | 多洛爾公司 | 03月18日 14時07分 | 週六, 5月 24日, 2014 |
| 基夫·弗萊徹 | 米·弗林吉拉工業 | 09月25日 15時03分 | 2015年10月22日 星期四 |
| 斯萊德·羅哈斯 | 索達利斯·尼西·馬格納電腦公司 | 09月1日 15時08分 | 2014年6月11日 星期三 |
| 凡娜·柯克蘭 | 坦普斯公司 | 02月14日 15時03分 | 2015年12月9日 星期三 |
| 卡梅隆·彼得斯 | 洛伯蒂斯·泰勒斯·賈斯托有限公司 | 02月9日 15時06分 | 2015年1月2日 星期五 |
| 里德·弗里曼 | 奧格·塞德·莫萊斯特有限責任合夥公司 | 09月24日 15時01分 | 週日, 7月 19日, 2015 |
| 佛羅倫斯·伯吉斯 | 阿利奎姆·奧克特·韋利特股份有限公司 | 04月20日 14時05分 | 2014年9月8日 星期一 |
運作方式
實際的插件程式碼非常簡單 - 只有 15 行。所有真正的「魔法」都由 Moment.js 為我們完成。但是，我們需要知道如何為 DataTables 建立插件，將其連接在一起。
自動類型偵測插件
DataTables 的類型偵測方法附加到 $.fn.dataTable.ext.type.detect 陣列。這是一個函式陣列，DataTables 將迴圈遍歷，檢查欄中的資料是否符合任何給定的類型。
因此，在這種情況下，我們可以簡單地使用 moment().isValid() 方法來檢查傳遞到函式中的資料是否有效。結果是
$.fn.dataTable.ext.type.detect.unshift( function ( d ) {
return moment( d, format, locale, true ).isValid() ?
'moment-'+format :
null;
} );
請注意，unshift 用於將類型偵測函式加在陣列的開頭，以確保 DataTables 在任何其他函式之前使用此類型偵測。
排序插件
與類型偵測插件類似，排序插件附加到 $.fn.dataTable.ext.type.order 物件，使用排序方法將應用到的類型的名稱。 DataTables 具有數值和字串值的內建排序比較，因此我們需要做的就是建立一個插件，該插件將傳回日期/時間的未格式化數值表示，我們可以使用 moment().unix()。
$.fn.dataTable.ext.type.order[ 'moment-'+format+'-pre' ] = function ( d ) {
return moment( d, format, locale, true ).unix();
};
完成的插件
將所有內容放在一起，我們就有了 DataTables 的結果插件 - 終極日期/時間排序插件，這要歸功於 Moment.js！
$.fn.dataTable.moment = function ( format, locale ) {
var types = $.fn.dataTable.ext.type;
// Add type detection
types.detect.unshift( function ( d ) {
return moment( d, format, locale, true ).isValid() ?
'moment-'+format :
null;
} );
// Add sorting method - use an integer for the sorting
types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
return moment( d, format, locale, true ).unix();
};
};