Format transform (Luxon)
This example shows the same transform abilities as the Moment.js example, but in this case using the Luxon date/time
library. The datetime
API is identical so it takes three parameters:
- The original date format (please note that the parser is strict - you must exactly match the data format)
- The format you want to display
- The locale - used for internationalisation.
Note however, although the API is identical, Luxon's formatting tokens are different from Moment.js'. For the full range of Luxon formatting options please see the Luxon documentation.
See the renderers documentation for full details about the renderers available in DataTables.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | 25 Apr 2011 | $320,800 |
Garrett Winters | Accountant | Tokyo | 63 | 25 Jul 2011 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 12 Jan 2009 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 29 Mar 2012 | $433,060 |
Airi Satou | Accountant | Tokyo | 33 | 28 Nov 2008 | $162,700 |
Brielle Williamson | Integration Specialist | New York | 61 | 2 Dec 2012 | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 6 Aug 2012 | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | 55 | 14 Oct 2010 | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | 39 | 15 Sep 2009 | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | 23 | 13 Dec 2008 | $103,600 |
Jena Gaines | Office Manager | London | 30 | 19 Dec 2008 | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | 22 | 3 Mar 2013 | $342,000 |
Charde Marshall | Regional Director | San Francisco | 36 | 16 Oct 2008 | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | 43 | 18 Dec 2012 | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | 19 | 17 Mar 2010 | $385,750 |
Michael Silva | Marketing Designer | London | 66 | 27 Nov 2012 | $198,500 |
Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 9 Jun 2010 | $725,000 |
Gloria Little | Systems Administrator | New York | 59 | 10 Apr 2009 | $237,500 |
Bradley Greer | Software Engineer | London | 41 | 13 Oct 2012 | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | 35 | 26 Sep 2012 | $217,500 |
Jenette Caldwell | Development Lead | New York | 30 | 3 Sep 2011 | $345,000 |
Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 25 Jun 2009 | $675,000 |
Caesar Vance | Pre-Sales Support | New York | 21 | 12 Dec 2011 | $106,450 |
Doris Wilder | Sales Assistant | Sydney | 23 | 20 Sep 2010 | $85,600 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 9 Oct 2009 | $1,200,000 |
Gavin Joyce | Developer | Edinburgh | 42 | 22 Dec 2010 | $92,575 |
Jennifer Chang | Regional Director | Singapore | 28 | 14 Nov 2010 | $357,650 |
Brenden Wagner | Software Engineer | San Francisco | 28 | 7 Jun 2011 | $206,850 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 11 Mar 2010 | $850,000 |
Shou Itou | Regional Marketing | Tokyo | 20 | 14 Aug 2011 | $163,000 |
Michelle House | Integration Specialist | Sydney | 37 | 2 Jun 2011 | $95,400 |
Suki Burks | Developer | London | 53 | 22 Oct 2009 | $114,500 |
Prescott Bartlett | Technical Author | London | 27 | 7 May 2011 | $145,000 |
Gavin Cortez | Team Leader | San Francisco | 22 | 26 Oct 2008 | $235,500 |
Martena Mccray | Post-Sales support | Edinburgh | 46 | 9 Mar 2011 | $324,050 |
Unity Butler | Marketing Designer | San Francisco | 47 | 9 Dec 2009 | $85,675 |
Howard Hatfield | Office Manager | San Francisco | 51 | 16 Dec 2008 | $164,500 |
Hope Fuentes | Secretary | San Francisco | 41 | 12 Feb 2010 | $109,850 |
Vivian Harrell | Financial Controller | San Francisco | 62 | 14 Feb 2009 | $452,500 |
Timothy Mooney | Office Manager | London | 37 | 11 Dec 2008 | $136,200 |
Jackson Bradshaw | Director | New York | 65 | 26 Sep 2008 | $645,750 |
Olivia Liang | Support Engineer | Singapore | 64 | 3 Feb 2011 | $234,500 |
Bruno Nash | Software Engineer | London | 38 | 3 May 2011 | $163,500 |
Sakura Yamamoto | Support Engineer | Tokyo | 37 | 19 Aug 2009 | $139,575 |
Thor Walton | Developer | New York | 61 | 11 Aug 2013 | $98,540 |
Finn Camacho | Support Engineer | San Francisco | 47 | 7 Jul 2009 | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | 64 | 9 Apr 2012 | $138,575 |
Zenaida Frank | Software Engineer | New York | 63 | 4 Jan 2010 | $125,250 |
Zorita Serrano | Software Engineer | San Francisco | 56 | 1 Jun 2012 | $115,000 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 1 Feb 2013 | $75,650 |
Cara Stevens | Sales Assistant | New York | 46 | 6 Dec 2011 | $145,600 |
Hermione Butler | Regional Director | London | 47 | 21 Mar 2011 | $356,250 |
Lael Greer | Systems Administrator | London | 21 | 27 Feb 2009 | $103,500 |
Jonas Alexander | Developer | San Francisco | 30 | 14 Jul 2010 | $86,500 |
Shad Decker | Regional Director | Edinburgh | 51 | 13 Nov 2008 | $183,000 |
Michael Bruce | Javascript Developer | Singapore | 29 | 27 Jun 2011 | $183,000 |
Donna Snider | Customer Support | New York | 27 | 25 Jan 2011 | $112,000 |
Name | Position | Office | Age | Start date | Salary |
- Javascript
- HTML
- CSS
- Ajax
- Server-side script
- Comments
The Javascript shown below is used to initialise the table shown in this example:
$('#example').DataTable({
columnDefs: [
{
targets: 4,
render: DataTable.render.datetime('d MMM yyyy', 'MMM d, yy', 'en')
}
]
});
new DataTable('#example', {
columnDefs: [
{
targets: 4,
render: DataTable.render.datetime('d MMM yyyy', 'MMM d, yy', 'en')
}
]
});
In addition to the above code, the following Javascript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.
The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.
Other examples
Basic initialisation
- Zero configuration
- Feature enable / disable
- Default ordering (sorting)
- Multi-column ordering
- Multiple tables
- Hidden columns
- Complex headers (rowspan and colspan)
- Flexible table width
- State saving
- Alternative pagination
- Data rendering
- Scroll - vertical
- Scroll - vertical, dynamic height
- Scroll - horizontal
- Scroll - horizontal and vertical
Advanced initialisation
- DOM / jQuery events
- DataTables events
- Column rendering
- Enter Key to Search
- Page length options
- Complex headers with column visibility
- Read HTML to data objects
- HTML5 data-* attributes - cell data
- HTML5 data-* attributes - table options
- Setting defaults
- Row created callback
- Row grouping
- Footer callback
- Order direction sequence control
- DOM element return from renderer
Styling
- Base style
- Base style - no styling classes
- Base style - cell borders
- Base style - compact
- Base style - hover
- Base style - order-column
- Base style - row borders
- Base style - stripe
- Bootstrap 3
- Bootstrap 4
- Bootstrap 5
- Foundation
- Fomantic-UI (formally Semantic-UI)
- Bulma
- jQuery UI ThemeRoller
- Material Design (Tech. preview)
- Tailwind CSS (Tech. preview)
- UIKit 3 (Tech. preview)
API
- Add rows
- Individual column searching (text inputs)
- Individual column searching (select inputs)
- Highlighting rows and columns
- Child rows (show extra / detailed information)
- Child rows with StateSave
- Row selection (multiple rows)
- Row selection and deletion (single row)
- Form inputs
- Index column
- Show / hide columns dynamically
- Using API in callbacks
- Scrolling and Bootstrap tabs
- Search API (regular expressions)
- HighCharts Integration