使用 Luxon 格式化的日期
此範例包含多種非標準格式的日期格式，以示範 SearchBuilder 如何使用格式化的日期運作。它使用了 DataTables 內建的 datetime() 函式，使用 Moment.js 或 Luxon 來格式化日期，具體取決於頁面上可用的內容（在此案例中為 Luxon）。
| 名稱 | 公司 | 建立時間 | 更新時間 |
|---|---|---|---|
| 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. | 02:09 9月 16, 14 | 週日, 11月 15, 2015 |
| Anjolie Floyd | Nunc Corp. | 12:03 3月 28, 14 | 週一, 12月 1, 2014 |
| Basil Harmon | Semper Rutrum Fusce PC | 05:12 12月 9, 15 | 週三, 9月 17, 2014 |
| Kermit Herrera | Sed Tortor Integer Limited | 03:09 9月 26, 14 | 週日, 6月 14, 2015 |
| Winifred Pearson | Augue Industries | 10:09 9月 18, 15 | 週二, 8月 4, 2015 |
| Lester Fischer | Aenean PC | 02:09 9月 15, 15 | 週三, 7月 29, 2015 |
| Tatum Daugherty | Nunc Nulla LLP | 09:06 6月 25, 15 | 週三, 2月 19, 2014 |
| Zachary Wilder | Nec LLC | 03:09 9月 19, 14 | 週三, 4月 8, 2015 |
| Laith Peters | Ipsum Leo Elementum Institute | 11:06 6月 17, 14 | 週四, 11月 13, 2014 |
| Evelyn Ramos | Nunc Industries | 01:06 6月 3, 14 | 週四, 4月 10, 2014 |
| Mara Michael | Ut Aliquam LLC | 10:07 7月 14, 14 | 週四, 11月 26, 2015 |
| Jemima Powers | Eu Arcu Morbi LLP | 06:08 8月 4, 14 | 週五, 5月 1, 2015 |
| Tanek Guthrie | Sit Associates | 09:02 2月 19, 15 | 週四, 5月 28, 2015 |
| Harriet Crane | Quis Accumsan Ltd | 12:08 8月 2, 14 | 週日, 12月 13, 2015 |
| Jin Bond | Auctor Quis Corp. | 09:08 8月 25, 15 | 週二, 11月 18, 2014 |
| Ursa Jacobs | Convallis Ante PC | 08:04 4月 5, 14 | 週二, 2月 18, 2014 |
| Jason Collier | Vel Pede Blandit Ltd | 01:05 5月 12, 14 | 週一, 9月 21, 2015 |
| Quemby Stone | Lacus Quisque Incorporated | 09:08 8月 10, 15 | 週四, 7月 2, 2015 |
| 梅爾文·斯威特 | Nec 基金會 | 05:01 1月 17, 15 | 週四, 5月 22, 2014 |
| 索爾·威爾遜 | Arcu Vivamus Sit 產業 | 02:02 2月 17, 15 | 週四, 8月 7, 2014 |
| 伯頓·馬奎斯 | Augue 公司 | 09:12 12月 2, 15 | 週三, 11月 26, 2014 |
| 凱·韋爾 | Facilisis Vitae 有限公司 | 12:06 6月 23, 14 | 週日, 6月 29, 2014 |
| 霍姆斯·墨菲 | Dui Nec Tempus 公司 | 12:10 10月 25, 15 | 週日, 4月 26, 2015 |
| 布萊恩·瓦倫丁 | Proin 研究院 | 04:10 10月 16, 14 | 週一, 3月 30, 2015 |
| 萊昂內爾·帕切科 | Dolor 公司 | 07:03 3月 18, 14 | 週六, 5月 24, 2014 |
| 基夫·弗萊徹 | A Mi Fringilla 產業 | 03:09 9月 25, 15 | 週四, 10月 22, 2015 |
| 斯萊德·羅哈斯 | Sodales Nisi Magna PC | 08:09 9月 1, 15 | 週三, 6月 11, 2014 |
| 凡娜·柯克蘭 | Tempus 公司 | 03:02 2月 14, 15 | 週三, 12月 9, 2015 |
| 卡梅倫·彼得斯 | Lobortis Tellus Justo 有限公司 | 06:02 2月 9, 15 | 週五, 1月 2, 2015 |
| 里德·弗里曼 | Augue Sed Molestie 有限責任合夥 | 01:09 9月 24, 15 | 週日, 7月 19, 2015 |
| 弗洛倫斯·伯吉斯 | Aliquam Auctor Velit 股份有限公司 | 05:04 4月 20, 14 | 週一, 9月 8, 2014 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
DataTable.datetime('EEE, MMMM d, yyyy'); DataTable.datetime('HH:mm MMM d, yy'); $('#example').DataTable({ layout: { topStart: 'searchBuilder' } });
DataTable.datetime('EEE, MMMM d, yyyy'); DataTable.datetime('HH:mm MMM d, yy'); new DataTable('#example', { layout: { topStart: 'searchBuilder' } });
除了以上程式碼之外，還載入了以下 Javascript 函式庫檔案，供本範例中使用
以下顯示的 HTML 是原始 HTML 表格元素，在經過 DataTables 增強之前
這個範例除了從函式庫檔案載入的 CSS 之外（如下），還使用了一些額外的 CSS，以便正確顯示表格。使用的額外 CSS 如下所示
以下 CSS 函式庫檔案載入供本範例中使用，以提供表格的樣式
此表格透過 Ajax 載入資料。顯示如下的是已載入的最新資料。當載入任何額外資料時，此資料將自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，方法是使用DataTables 文件中描述的協定。