使用 Moment.js 格式化日期
此示例包含多种不采用标准格式的日期格式,以演示 SearchBuilder 如何处理格式化日期。它利用了 DataTables 内置的 `datetime()` 函数,使用 Moment.js 或 Luxon 格式化日期,具体取决于页面上可用的内容(在本例中为 Moment.js)。
| 姓名 | 公司 | 创建日期 | 更新日期 |
|---|---|---|---|
| Dai Weeks | Eu Foundation | 10月 18 日 14:10 | 2015 年 5 月 16 日 星期六 |
| Jade Dale | Sit Amet Inc. | 4 月 29 日 14:07 | 2015 年 7 月 25 日 星期六 |
| Melanie Buckner | Tempus Lorem LLC | 1 月 28 日 15:02 | 2015 年 10 月 11 日 星期日 |
| Cyrus Haney | Phasellus Corp. | 1 月 28 日 14:10 | 2013 年 12 月 28 日 星期六 |
| Melinda Salas | Molestie Sed Id Limited | 5 月 1 日 14:11 | 2015 年 5 月 15 日 星期五 |
| Rebecca Cline | Eget Dictum Placerat Limited | 12 月 20 日 13:02 | 2014 年 8 月 6 日 星期三 |
| India Lawson | Eget Company | 3 月 21 日 15:11 | 2014 年 7 月 11 日 星期五 |
| Elvis Whitfield | Mollis Corporation | 7 月 30 日 15:08 | 2015 年 2 月 28 日 星期六 |
| Castor Monroe | Iaculis LLC | 6 月 22 日 14:12 | 2014 年 6 月 2 日 星期一 |
| Gareth Berry | Malesuada Corp. | 2 月 26 日 14:04 | 2015 年 2 月 27 日 星期五 |
| Anne Knox | Neque Sed Consulting | 4 月 11 日 14:04 | 2014 年 5 月 24 日 星期六 |
| Kasimir Martin | Tortor Nunc Consulting | 12 月 24 日 14:11 | 2015 年 7 月 25 日 星期六 |
| Drake Pugh | Mattis Velit Industries | 9 月 23 日 15:03 | 2014 年 3 月 5 日 星期三 |
| Carla Head | Pretium Aliquet Institute | 9 月 2 日 15:06 | 2014 年 1 月 8 日 星期三 |
| Shellie Henry | Scelerisque Ltd | 1 月 28 日 15:11 | 2015 年 2 月 1 日 星期日 |
| Patrick Koch | Scelerisque Dui LLC | 10 月 3 日 14:10 | 2015 年 5 月 17 日 星期日 |
| Dara Roberts | Urna Convallis Erat Industries | 8 月 13 日 15:11 | 2014 年 6 月 22 日 星期日 |
| Yuli Wright | Auctor Consulting | 7 月 22 日 14:05 | 2014 年 3 月 25 日 星期二 |
| Cyrus Jensen | Et Risus Associates | 9 月 19 日 15:10 | 2015 年 5 月 16 日 星期六 |
| Holmes Talley | Urna Nullam Lobortis Consulting | 12 月 25 日 14:01 | 2014 年 2 月 13 日 星期四 |
| Iris Carver | Laoreet Lectus Quis LLC | 10 月 13 日 14:12 | 2014 年 11 月 7 日 星期五 |
| Leroy Cantrell | In LLC | 5 月 5 日 15:03 | 2015 年 6 月 2 日 星期二 |
| Maggie Aguilar | Mauris PC | 12 月 7 日 14:02 | 2014 年 11 月 20 日 星期四 |
| Maggy Porter | Mauris Blandit Ltd | 6 月 4 日 14:11 | 2014 年 11 月 11 日 星期二 |
| Liberty Warner | Ipsum Company | 11 月 17 日 15:05 | 2015 年 10 月 5 日 星期一 |
| Raya Dean | Felis Foundation | 12 月 18 日 14:02 | 2014 年 2 月 10 日 星期一 |
| Jack Juarez | Nunc Limited | 9 月 7 日 15:01 | 2014 年 12 月 22 日 星期一 |
| Nola King | Varius Orci Incorporated | 5 月 12 日 15:04 | 2014 年 6 月 24 日 星期二 |
| Carlos Holman | Odio LLC | 8 月 16 日 15:01 | 2015 年 8 月 20 日 星期四 |
| Aquila Finch | Egestas Ligula Nullam Institute | 9 月 3 日 15:12 | 2014 年 3 月 22 日 星期六 |
| Seth Porter | Sem Ut Inc. | 6 月 4 日 15:01 | 2015 年 3 月 1 日 星期日 |
| Oleg Mcpherson | Nunc Ac Sem LLP | 8 月 3 日 14:03 | 2014 年 9 月 21 日 星期日 |
| Kennan Snyder | Amet Consectetuer Associates | 1 月 23 日 14:06 | 2014 年 4 月 7 日 星期一 |
| Emery Donovan | Dapibus Inc. | 6 月 14 日 14:08 | 2014 年 9 月 30 日 星期二 |
| Naida Hunter | Augue Scelerisque Mollis Inc. | 12 月 23 日 13:11 | 2015 年 7 月 19 日 星期日 |
| Clinton Morrison | Non Lacinia Industries | 3 月 18 日 14:02 | 2015 年 3 月 6 日 星期五 |
| Helen Gutierrez | Faucibus Incorporated | 8 月 7 日 15:07 | 2014 年 2 月 4 日 星期二 |
| Candice Bonner | Donec LLP | 12 月 28 日 13:05 | 2015 年 3 月 16 日 星期一 |
| Nissim Carter | Suspendisse Sed Limited | 3 月 19 日 14:01 | 2015 年 6 月 29 日 星期一 |
| Kasimir Hoffman | Id Libero Donec Consulting | 12 月 23 日 14:05 | 2015 年 9 月 23 日 星期三 |
| Imogene Mcconnell | Vitae Associates | 2 月 17 日 15:07 | 2014 年 7 月 22 日 星期二 |
| Sage Mosley | Metus In Inc. | 5 月 24 日 15:05 | 2014 年 4 月 21 日 星期一 |
| Sybil Puckett | Vel Lectus LLP | 6 月 9 日 14:09 | 2014 年 9 月 6 日 星期六 |
| Kylynn Solis | Ac Limited | 1 月 20 日 15:10 | 2015 年 9 月 15 日 星期二 |
| Beatrice Hurley | Mauris A Nunc Corporation | 5 月 11 日 14:04 | 2015 年 4 月 26 日 星期日 |
| Troy Marquez | Dapibus Quam Institute | 2 月 7 日 15:12 | 2015 年 4 月 23 日 星期四 |
| Malcolm Payne | Adipiscing Ligula Institute | 8 月 17 日 15:04 | 2014 年 9 月 2 日 星期二 |
| Wade Valenzuela | Sagittis Duis Gravida Corporation | 5 月 22 日 14:03 | 2014 年 1 月 13 日 星期一 |
| Kathleen Gilmore | Urna Nec Ltd | 3 月 5 日 14:05 | 2015 年 11 月 16 日 星期一 |
| Maite Scott | Ipsum Cursus Inc. | 5 月 28 日 14:01 | 2014 年 6 月 8 日 星期日 |
| Kamal Nash | Sem Vitae Company | 10 月 7 日 14:05 | 2014 年 6 月 26 日 星期四 |
| Iliana West | Ac Eleifend Limited | 10 月 24 日 15:01 | 2014 年 7 月 2 日 星期三 |
| Susan Osborn | Sollicitudin Adipiscing Ligula Institute | 2 月 18 日 14:03 | 2015 年 6 月 13 日 星期六 |
| Adena Carter | Nibh Industries | 1 月 27 日 15:04 | 2015 年 2 月 3 日 星期二 |
| Duncan Mckinney | Vel Convallis In Inc. | 11 月 23 日 15:09 | 2015 年 12 月 12 日 星期六 |
| Ariana Whitehead | Fermentum Metus Associates | 6 月 9 日 14:03 | 2015 年 12 月 15 日 星期二 |
| Fiona Henderson | Eget Tincidunt Dui Inc. | 1 月 1 日 14:03 | 2015 年 1 月 9 日 星期五 |
| Judah Gates | Donec Felis Associates | 11 月 30 日 15:04 | 2015 年 9 月 28 日 星期一 |
| Hasad Mccarthy | Ac Tellus Company | 1 月 21 日 14:12 | 2014 年 1 月 27 日 星期一 |
| Shay Valencia | Natoque Associates | 3 月 4 日 14:05 | 2014 年 12 月 15 日 星期一 |
| Hillary Tran | Integer Mollis Foundation | 12 月 31 日 14:08 | 2015 年 8 月 26 日 星期三 |
| Margaret Sellers | Lacus Quisque Corporation | 10 月 17 日 15:11 | 2015 年 7 月 5 日 星期日 |
| Prescott Morton | Vestibulum Associates | 4 月 27 日 15:01 | 2015 年 6 月 14 日 星期日 |
| Charity Gilbert | Tortor At Risus Associates | 7 月 31 日 14:01 | 2014 年 12 月 18 日 星期四 |
| Freya Randolph | Ut Institute | 11 月 3 日 15:07 | 2014 年 9 月 27 日 星期六 |
| Nita Howe | Ornare Fusce Inc. | 2 月 12 日 14:11 | 2015 年 6 月 9 日 星期二 |
| Kirby Whitney | Faucibus Morbi Vehicula Foundation | 12 月 22 日 13:11 | 2015 年 8 月 26 日 星期三 |
| Amos Jarvis | Mauris Suspendisse Aliquet LLP | 5 月 10 日 15:01 | 2014 年 7 月 14 日 星期一 |
| Kim Hunter | Ligula Donec Luctus Corp. | 11 月 25 日 15:07 | 2014 年 10 月 23 日 星期四 |
| Rosalyn Benton | Iaculis Quis Pede Corp. | 9 月 16 日 14:02 | 2015 年 11 月 15 日 星期日 |
| Anjolie Floyd | Nunc Corp. | 3 月 28 日 14:12 | 2014 年 12 月 1 日 星期一 |
| Basil Harmon | Semper Rutrum Fusce PC | 12 月 9 日 15:05 | 2014 年 9 月 17 日 星期三 |
| Kermit Herrera | Sed Tortor Integer Limited | 9 月 26 日 14:03 | 2015 年 6 月 14 日 星期日 |
| Winifred Pearson | Augue Industries | 9 月 18 日 15:10 | 2015 年 8 月 4 日 星期二 |
| Lester Fischer | Aenean PC | 9 月 15 日 15:02 | 2015 年 7 月 29 日 星期三 |
| Tatum Daugherty | Nunc Nulla LLP | 6 月 25 日 15:09 | 2014 年 2 月 19 日 星期三 |
| Zachary Wilder | Nec LLC | 9 月 19 日 14:03 | 2015 年 4 月 8 日 星期三 |
| Laith Peters | Ipsum Leo Elementum Institute | 6 月 17 日 14:11 | 2014 年 11 月 13 日 星期四 |
| Evelyn Ramos | Nunc Industries | 6 月 3 日 14:01 | 2014 年 4 月 10 日 星期四 |
| Mara Michael | Ut Aliquam LLC | 7 月 14 日 14:10 | 2015 年 11 月 26 日 星期四 |
| Jemima Powers | Eu Arcu Morbi LLP | 8 月 4 日 14:06 | 2015 年 5 月 1 日 星期五 |
| Tanek Guthrie | Sit Associates | 2 月 19 日 15:09 | 2015 年 5 月 28 日 星期四 |
| Harriet Crane | Quis Accumsan Ltd | 8 月 2 日 14:12 | 2015 年 12 月 13 日 星期日 |
| Jin Bond | Auctor Quis Corp. | 8 月 25 日 15:09 | 2014 年 11 月 18 日 星期二 |
| Ursa Jacobs | Convallis Ante PC | 4 月 5 日 14:08 | 2014 年 2 月 18 日 星期二 |
| Jason Collier | Vel Pede Blandit Ltd | 5 月 12 日 14:01 | 2015 年 9 月 21 日 星期一 |
| Quemby Stone | Lacus Quisque Incorporated | 8 月 10 日 15:09 | 2015 年 7 月 2 日 星期四 |
| Melvin Sweet | Nec Foundation | 1 月 17 日 15:05 | 2014 年 5 月 22 日 星期四 |
| Thor Wilson | Arcu Vivamus Sit Industries | 2 月 17 日 15:02 | 2014 年 8 月 7 日 星期四 |
| 伯顿·马奎兹 | 奥古公司 | 15年12月2日 09:12 | 2014年11月26日,星期三 |
| 凯·韦尔 | 易世维泰有限公司 | 14年6月23日 12:06 | 2014年6月29日,星期日 |
| 霍姆斯·墨菲 | 对内克坦普斯公司 | 15年10月25日 12:10 | 2015 年 4 月 26 日 星期日 |
| 布莱恩·瓦伦丁 | 普罗因研究所 | 14年10月16日 04:10 | 2015年3月30日,星期一 |
| 莱昂内尔·帕切科 | 多洛尔公司 | 14年3月18日 07:03 | 2014 年 5 月 24 日 星期六 |
| 基夫·弗莱彻 | 艾米弗林吉拉工业 | 15年9月25日 03:09 | 2015年10月22日,星期四 |
| 斯莱德·罗哈斯 | 索达莱斯尼西马格纳个人电脑 | 15年9月1日 08:09 | 2014年6月11日,星期三 |
| 凡纳·柯克兰 | 坦普斯公司 | 15年2月14日 03:02 | 2015年12月9日,星期三 |
| 卡梅伦·彼得斯 | 洛伯蒂斯泰勒斯胡斯托有限公司 | 15年2月9日 06:02 | 2015年1月2日,星期五 |
| 里德·弗里曼 | 奥古塞德莫莱斯蒂律师事务所 | 15年9月24日 01:09 | 2015 年 7 月 19 日 星期日 |
| 弗洛伦斯·伯吉斯 | 阿里夸姆奥托尔维利特公司 | 14年4月20日 05:04 | 2014年9月8日,星期一 |
- JavaScript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
下面显示的 JavaScript 用于初始化本示例中显示的表格
DataTable.datetime('HH:mm MMM D, YY'); DataTable.datetime('ddd, MMMM Do, YYYY'); $('#example').DataTable({ layout: { topStart: 'searchBuilder' } });
DataTable.datetime('HH:mm MMM D, YY'); DataTable.datetime('ddd, MMMM Do, YYYY'); $('#example').DataTable({ layout: { topStart: 'searchBuilder' } });
除了以上代码之外,以下 JavaScript 库文件也加载以在本示例中使用
下面显示的 HTML 是原始 HTML 表格元素,在它被 DataTables 增强之前
此示例使用了一些超出库文件(如下)加载的 CSS,以便正确显示表格。下面显示了使用的附加 CSS
以下 CSS 库文件加载以在本示例中使用,以提供表格的样式
此表格通过 Ajax 加载数据。下面显示了已加载的最新数据。随着任何其他数据的加载,此数据将自动更新。
用于执行此表格服务器端处理的脚本显示如下。请注意,这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写,使用DataTables 文档中描述的协议。