Tables - DataTables
DataTables is a jQuery plugin that adds interactive controls to an HTML table.
DataTables may be used for displaying large amounts of data across multiple columns, but it is suitable for any sized data set. DataTables will enable your tables to be viewable on mobile devices. It does this by hiding columns, starting from the right side, and showing them when you click on the arrow.
Rules for DataTables
- Only text-based content must be used within tables.
- See the tables pattern for available colour options.
- The following additional scripts must be included on the page before the closing
</body>tag:https://www.st-andrews.ac.uk/~cdn/dpl/1.23.2/scripts/jquery.dataTables.min.jshttps://www.st-andrews.ac.uk/~cdn/dpl/1.23.2/scripts/datatables.js
Options available
Default options
This shows a DataTable with the recommended options enabled: row limit, filter, pagination and current rows indicator.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Airi Satou | Accountant | Tokyo | 33 | Friday 28 November 2008 | £162,700 |
| Angelica Ramos | Chief executive officer (CEO) | London | 47 | Friday 9 October 2009 | £1,200,000 |
| Ashton Cox | Junior technical author | San Francisco | 66 | Monday 12 January 2009 | £86,000 |
| Bradley Greer | Software engineer | London | 41 | Saturday 13 October 2012 | £132,000 |
| Brenden Wagner | Software engineer | San Francisco | 28 | Tuesday 7 June 2011 | £206,850 |
| Brielle Williamson | Integration specialist | New York | 61 | Sunday 2 December 2012 | £372,000 |
| Bruno Nash | Software engineer | London | 38 | Tuesday 3 May 2011 | £163,500 |
| Caesar Vance | Pre-sales support | New York | 21 | Monday 12 May 2011 | £106,450 |
| Cara Stevens | Sales assistant | New York | 46 | Tuesday 6 December 2011 | £145,600 |
| Cedric Kelly | Senior JavaScript developer | Edinburgh | 22 | Thursday 29 March 2012 | £433,060 |
| Charde Marshall | Regional director | San Francisco | 36 | Thursday 16 October 2008 | £470,600 |
| Colleen Hurst | JavaScript developer | San Francisco | 39 | Tuesday 15 March 2009 | £205,500 |
| Dai Rios | Personnel lead | Edinburgh | 35 | Wednesday 6 August 2012 | £217,500 |
| Donna Snider | Customer Support | New York | 27 | Tuesday 25 January 2011 | £112,000 |
| Doris Wilder | Sales assistant | Sydney | 23 | Monday 2 April 2010 | £85,600 |
| Finn Camacho | Support engineer | San Francisco | 47 | Tuesday 7 July 2009 | £87,500 |
| Fiona Green | Chief operating officer (COO) | San Francisco | 48 | Thursday 11 March 2010 | £850,000 |
| Garrett Winters | Accountant | Tokyo | 63 | Monday 25 July 2011 | £170,750 |
| Gavin Cortez | Team leader | San Francisco | 22 | Sunday 6 October 2008 | £235,500 |
| Gavin Joyce | Developer | Edinburgh | 42 | Wednesday 22 August 2010 | £92,575 |
| Gloria Little | Systems administrator | New York | 59 | Friday 10 April 2009 | £237,500 |
| Haley Kennedy | Senior marketing designer | London | 43 | Tuesday 18 February 2012 | £313,500 |
| Hermione Butler | Regional director | London | 47 | Monday 21 March 2011 | £356,250 |
| Herrod Chandler | Sales assistant | San Francisco | 59 | Monday 6 August 2012 | £137,500 |
| Hope Fuentes | Secretary | San Francisco | 41 | Friday 12 February 2010 | £109,850 |
| Howard Hatfield | Office manager | San Francisco | 51 | Tuesday 16 October 2008 | £164,500 |
| Jackson Bradshaw | Director | New York | 65 | Friday 26 September 2008 | £645,750 |
| Jena Gaines | Office manager | London | 30 | Friday 19 December 2008 | £90,560 |
| Jenette Caldwell | Development lead | New York | 30 | Saturday 3 July 2011 | £345,000 |
| Jennifer Acosta | Junior JavaScript developer | Edinburgh | 43 | Friday 1 March 2013 | £75,650 |
| Jennifer Chang | Regional director | Singapore | 28 | Sunday 14 November 2010 | £357,650 |
| Jonas Alexander | Developer | San Francisco | 30 | Wednesday 14 July 2010 | £86,500 |
| Lael Greer | Systems administrator | London | 21 | Friday 27 February 2009 | £103,500 |
| Martena Mccray | Post-sales support | Edinburgh | 46 | Wednesday 9 March 2011 | £324,050 |
| Michael Bruce | JavaScript developer | Singapore | 29 | Monday 27 June 2011 | £183,000 |
| Michael Silva | Marketing designer | London | 66 | Tuesday 27 June 2012 | £198,500 |
| Michelle House | Integration specialist | Sydney | 37 | Thursday 2 June 2011 | £95,400 |
| Olivia Liang | Support engineer | Singapore | 64 | Thursday 3 February 2011 | £234,500 |
| Paul Byrd | Chief financial officer (CFO) | New York | 64 | Wednesday 9 June 2010 | £725,000 |
| Prescott Bartlett | Technical author | London | 27 | Saturday 7 May 2011 | £145,000 |
| Quinn Flynn | Support lead | Edinburgh | 22 | Sunday 3 March 2013 | £342,000 |
| Rhona Davidson | Integration specialist | Tokyo | 55 | Thursday 14 October 2010 | £327,900 |
| Sakura Yamamoto | Support engineer | Tokyo | 37 | Wednesday 19 August 2009 | £139,575 |
| Serge Baldwin | Data coordinator | Singapore | 64 | Monday 9 April 2012 | £138,575 |
| Shad Decker | Regional director | Edinburgh | 51 | Thursday 3 November 2008 | £183,000 |
| Shou Itou | Regional marketing | Tokyo | 20 | Sunday 14 August 2011 | £163,000 |
| Sonya Frost | Software engineer | Edinburgh | 23 | Saturday 3 December 2008 | £103,600 |
| Suki Burks | Developer | London | 53 | Thursday 22 October 2009 | £114,500 |
| Tatyana Fitzpatrick | Regional director | London | 19 | Wednesday 17 March 2010 | £385,750 |
| Thor Walton | Developer | New York | 61 | Sunday 11 August 2013 | £98,540 |
| Tiger Nixon | System architect | Edinburgh | 61 | Monday 25 April 2011 | £320,800 |
| Timothy Mooney | Office manager | London | 37 | Thursday 1 December 2008 | £136,200 |
| Unity Butler | Marketing designer | San Francisco | 47 | Wednesday 9 June 2009 | £85,675 |
| Vivian Harrell | Financial controller | San Francisco | 62 | Saturday 14 February 2009 | £452,500 |
| Yuri Berry | Chief marketing officer (CMO) | New York | 40 | Thursday 25 June 2009 | £675,000 |
| Zenaida Frank | Software engineer | New York | 63 | Monday 4 January 2010 | £125,250 |
| Zorita Serrano | Software engineer | San Francisco | 56 | Friday 1 June 2012 | £115,000 |
Code
Example
Name
Position
Office
Age
Start date
Salary
Airi Satou
Accountant
Tokyo
33
Friday 28 November 2008
£162,700
Angelica Ramos
Chief executive officer (CEO)
London
47
Friday 9 October 2009
£1,200,000
Ashton Cox
Junior technical author
San Francisco
66
Monday 12 January 2009
£86,000
Bradley Greer
Software engineer
London
41
Saturday 13 October 2012
£132,000
Brenden Wagner
Software engineer
San Francisco
28
Tuesday 7 June 2011
£206,850
Brielle Williamson
Integration specialist
New York
61
Sunday 2 December 2012
£372,000
Bruno Nash
Software engineer
London
38
Tuesday 3 May 2011
£163,500
Caesar Vance
Pre-sales support
New York
21
Monday 12 May 2011
£106,450
Cara Stevens
Sales assistant
New York
46
Tuesday 6 December 2011
£145,600
Cedric Kelly
Senior JavaScript developer
Edinburgh
22
Thursday 29 March 2012
£433,060
Charde Marshall
Regional director
San Francisco
36
Thursday 16 October 2008
£470,600
Colleen Hurst
JavaScript developer
San Francisco
39
Tuesday 15 March 2009
£205,500
Dai Rios
Personnel lead
Edinburgh
35
Wednesday 6 August 2012
£217,500
Donna Snider
Customer Support
New York
27
Tuesday 25 January 2011
£112,000
Doris Wilder
Sales assistant
Sydney
23
Monday 2 April 2010
£85,600
Finn Camacho
Support engineer
San Francisco
47
Tuesday 7 July 2009
£87,500
Fiona Green
Chief operating officer (COO)
San Francisco
48
Thursday 11 March 2010
£850,000
Garrett Winters
Accountant
Tokyo
63
Monday 25 July 2011
£170,750
Gavin Cortez
Team leader
San Francisco
22
Sunday 6 October 2008
£235,500
Gavin Joyce
Developer
Edinburgh
42
Wednesday 22 August 2010
£92,575
Gloria Little
Systems administrator
New York
59
Friday 10 April 2009
£237,500
Haley Kennedy
Senior marketing designer
London
43
Tuesday 18 February 2012
£313,500
Hermione Butler
Regional director
London
47
Monday 21 March 2011
£356,250
Herrod Chandler
Sales assistant
San Francisco
59
Monday 6 August 2012
£137,500
Hope Fuentes
Secretary
San Francisco
41
Friday 12 February 2010
£109,850
Howard Hatfield
Office manager
San Francisco
51
Tuesday 16 October 2008
£164,500
Jackson Bradshaw
Director
New York
65
Friday 26 September 2008
£645,750
Jena Gaines
Office manager
London
30
Friday 19 December 2008
£90,560
Jenette Caldwell
Development lead
New York
30
Saturday 3 July 2011
£345,000
Jennifer Acosta
Junior JavaScript developer
Edinburgh
43
Friday 1 March 2013
£75,650
Jennifer Chang
Regional director
Singapore
28
Sunday 14 November 2010
£357,650
Jonas Alexander
Developer
San Francisco
30
Wednesday 14 July 2010
£86,500
Lael Greer
Systems administrator
London
21
Friday 27 February 2009
£103,500
Martena Mccray
Post-sales support
Edinburgh
46
Wednesday 9 March 2011
£324,050
Michael Bruce
JavaScript developer
Singapore
29
Monday 27 June 2011
£183,000
Michael Silva
Marketing designer
London
66
Tuesday 27 June 2012
£198,500
Michelle House
Integration specialist
Sydney
37
Thursday 2 June 2011
£95,400
Olivia Liang
Support engineer
Singapore
64
Thursday 3 February 2011
£234,500
Paul Byrd
Chief financial officer (CFO)
New York
64
Wednesday 9 June 2010
£725,000
Prescott Bartlett
Technical author
London
27
Saturday 7 May 2011
£145,000
Quinn Flynn
Support lead
Edinburgh
22
Sunday 3 March 2013
£342,000
Rhona Davidson
Integration specialist
Tokyo
55
Thursday 14 October 2010
£327,900
Sakura Yamamoto
Support engineer
Tokyo
37
Wednesday 19 August 2009
£139,575
Serge Baldwin
Data coordinator
Singapore
64
Monday 9 April 2012
£138,575
Shad Decker
Regional director
Edinburgh
51
Thursday 3 November 2008
£183,000
Shou Itou
Regional marketing
Tokyo
20
Sunday 14 August 2011
£163,000
Sonya Frost
Software engineer
Edinburgh
23
Saturday 3 December 2008
£103,600
Suki Burks
Developer
London
53
Thursday 22 October 2009
£114,500
Tatyana Fitzpatrick
Regional director
London
19
Wednesday 17 March 2010
£385,750
Thor Walton
Developer
New York
61
Sunday 11 August 2013
£98,540
Tiger Nixon
System architect
Edinburgh
61
Monday 25 April 2011
£320,800
Timothy Mooney
Office manager
London
37
Thursday 1 December 2008
£136,200
Unity Butler
Marketing designer
San Francisco
47
Wednesday 9 June 2009
£85,675
Vivian Harrell
Financial controller
San Francisco
62
Saturday 14 February 2009
£452,500
Yuri Berry
Chief marketing officer (CMO)
New York
40
Thursday 25 June 2009
£675,000
Zenaida Frank
Software engineer
New York
63
Monday 4 January 2010
£125,250
Zorita Serrano
Software engineer
San Francisco
56
Friday 1 June 2012
£115,000
Minimal options
This shows the minimum options for a DataTable and must only be used when the table contains ten rows or fewer.
| Name | Position | Office | Salary |
|---|---|---|---|
| Airi Satou | Accountant | Tokyo | £162,700 |
| Angelica Ramos | Chief executive officer (CEO) | London | £1,200,000 |
| Ashton Cox | Junior technical author | San Francisco | £86,000 |
| Bradley Greer | Software engineer | London | £132,000 |
| Brenden Wagner | Software engineer | San Francisco | £206,850 |
| Brielle Williamson | Integration specialist | New York | £372,000 |
| Bruno Nash | Software engineer | London | £163,500 |
| Caesar Vance | Pre-sales support | New York | £106,450 |
| Cara Stevens | Sales assistant | New York | £145,600 |
| Cedric Kelly | Senior JavaScript developer | Edinburgh | £433,060 |
Code
Name
Position
Office
Salary
Airi Satou
Accountant
Tokyo
£162,700
Angelica Ramos
Chief executive officer (CEO)
London
£1,200,000
Ashton Cox
Junior technical author
San Francisco
£86,000
Bradley Greer
Software engineer
London
£132,000
Brenden Wagner
Software engineer
San Francisco
£206,850
Brielle Williamson
Integration specialist
New York
£372,000
Bruno Nash
Software engineer
London
£163,500
Caesar Vance
Pre-sales support
New York
£106,450
Cara Stevens
Sales assistant
New York
£145,600
Cedric Kelly
Senior JavaScript developer
Edinburgh
£433,060