DataTables example Complex headers (rowspan and colspan)
When using tables to display data, you will often wish to display column information in groups.
DataTables fully supports colspan and rowspan in the table's header,
assigning the required order listeners to the TH element suitable for that column.
Each column must have one TH cell which is unique to it for the listeners to be added. By default
DataTables will use the bottom unique cell for the column to attach the order listener, if more than
one cell for a column if found. The orderCellsTopDT option can be used to tell
DataTables to use the top cell if you prefer.
The example shown below has two sets of grouped information, grouped by colspan in the header.
Name
HR Information
Contact
Position
Salary
Office
Extn.
E-mail
Name
Position
Salary
Office
Extn.
E-mail
Tiger Nixon
System Architect
$320,800
Edinburgh
5421
t.nixon@datatables.net
Garrett Winters
Accountant
$170,750
Tokyo
8422
g.winters@datatables.net
Ashton Cox
Junior Technical Author
$86,000
San Francisco
1562
a.cox@datatables.net
Cedric Kelly
Senior Javascript Developer
$433,060
Edinburgh
6224
c.kelly@datatables.net
Airi Satou
Accountant
$162,700
Tokyo
5407
a.satou@datatables.net
Brielle Williamson
Integration Specialist
$372,000
New York
4804
b.williamson@datatables.net
Herrod Chandler
Sales Assistant
$137,500
San Francisco
9608
h.chandler@datatables.net
Rhona Davidson
Integration Specialist
$327,900
Tokyo
6200
r.davidson@datatables.net
Colleen Hurst
Javascript Developer
$205,500
San Francisco
2360
c.hurst@datatables.net
Sonya Frost
Software Engineer
$103,600
Edinburgh
1667
s.frost@datatables.net
Jena Gaines
Office Manager
$90,560
London
3814
j.gaines@datatables.net
Quinn Flynn
Support Lead
$342,000
Edinburgh
9497
q.flynn@datatables.net
Charde Marshall
Regional Director
$470,600
San Francisco
6741
c.marshall@datatables.net
Haley Kennedy
Senior Marketing Designer
$313,500
London
3597
h.kennedy@datatables.net
Tatyana Fitzpatrick
Regional Director
$385,750
London
1965
t.fitzpatrick@datatables.net
Michael Silva
Marketing Designer
$198,500
London
1581
m.silva@datatables.net
Paul Byrd
Chief Financial Officer (CFO)
$725,000
New York
3059
p.byrd@datatables.net
Gloria Little
Systems Administrator
$237,500
New York
1721
g.little@datatables.net
Bradley Greer
Software Engineer
$132,000
London
2558
b.greer@datatables.net
Dai Rios
Personnel Lead
$217,500
Edinburgh
2290
d.rios@datatables.net
Jenette Caldwell
Development Lead
$345,000
New York
1937
j.caldwell@datatables.net
Yuri Berry
Chief Marketing Officer (CMO)
$675,000
New York
6154
y.berry@datatables.net
Caesar Vance
Pre-Sales Support
$106,450
New York
8330
c.vance@datatables.net
Doris Wilder
Sales Assistant
$85,600
Sidney
3023
d.wilder@datatables.net
Angelica Ramos
Chief Executive Officer (CEO)
$1,200,000
London
5797
a.ramos@datatables.net
Gavin Joyce
Developer
$92,575
Edinburgh
8822
g.joyce@datatables.net
Jennifer Chang
Regional Director
$357,650
Singapore
9239
j.chang@datatables.net
Brenden Wagner
Software Engineer
$206,850
San Francisco
1314
b.wagner@datatables.net
Fiona Green
Chief Operating Officer (COO)
$850,000
San Francisco
2947
f.green@datatables.net
Shou Itou
Regional Marketing
$163,000
Tokyo
8899
s.itou@datatables.net
Michelle House
Integration Specialist
$95,400
Sidney
2769
m.house@datatables.net
Suki Burks
Developer
$114,500
London
6832
s.burks@datatables.net
Prescott Bartlett
Technical Author
$145,000
London
3606
p.bartlett@datatables.net
Gavin Cortez
Team Leader
$235,500
San Francisco
2860
g.cortez@datatables.net
Martena Mccray
Post-Sales support
$324,050
Edinburgh
8240
m.mccray@datatables.net
Unity Butler
Marketing Designer
$85,675
San Francisco
5384
u.butler@datatables.net
Howard Hatfield
Office Manager
$164,500
San Francisco
7031
h.hatfield@datatables.net
Hope Fuentes
Secretary
$109,850
San Francisco
6318
h.fuentes@datatables.net
Vivian Harrell
Financial Controller
$452,500
San Francisco
9422
v.harrell@datatables.net
Timothy Mooney
Office Manager
$136,200
London
7580
t.mooney@datatables.net
Jackson Bradshaw
Director
$645,750
New York
1042
j.bradshaw@datatables.net
Olivia Liang
Support Engineer
$234,500
Singapore
2120
o.liang@datatables.net
Bruno Nash
Software Engineer
$163,500
London
6222
b.nash@datatables.net
Sakura Yamamoto
Support Engineer
$139,575
Tokyo
9383
s.yamamoto@datatables.net
Thor Walton
Developer
$98,540
New York
8327
t.walton@datatables.net
Finn Camacho
Support Engineer
$87,500
San Francisco
2927
f.camacho@datatables.net
Serge Baldwin
Data Coordinator
$138,575
Singapore
8352
s.baldwin@datatables.net
Zenaida Frank
Software Engineer
$125,250
New York
7439
z.frank@datatables.net
Zorita Serrano
Software Engineer
$115,000
San Francisco
4389
z.serrano@datatables.net
Jennifer Acosta
Junior Javascript Developer
$75,650
Edinburgh
3431
j.acosta@datatables.net
Cara Stevens
Sales Assistant
$145,600
New York
3990
c.stevens@datatables.net
Hermione Butler
Regional Director
$356,250
London
1016
h.butler@datatables.net
Lael Greer
Systems Administrator
$103,500
London
6733
l.greer@datatables.net
Jonas Alexander
Developer
$86,500
San Francisco
8196
j.alexander@datatables.net
Shad Decker
Regional Director
$183,000
Edinburgh
6373
s.decker@datatables.net
Michael Bruce
Javascript Developer
$183,000
Singapore
5384
m.bruce@datatables.net
Donna Snider
Customer Support
$112,000
New York
4226
d.snider@datatables.net
Javascript
HTML
CSS
Ajax
Server-side script
The Javascript shown below is used to initialise the table shown 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.