A fairly common requirement for highly interactive tables which are displayed on the web is to have
a column which with a 'counter' for the row number. This column should not be sortable, and will change
dynamically as the ordering and searching applied to the table is altered by the end user.
This example shows how this can be achieved with DataTables, where the first column is the counter
column, and is updated when ordering or searching occurs. This is done by listening for the orderDT and searchDT events emitted by the table. When these events are
detected the column().nodes()DT method is used to get the TD/TH
nodes for the target column and the each() helper function used to iterate over each,
which have their contents updated as needed. Note that the filter and order
options are using in the column()DT method to get the nodes in the current order
and with the currently applied filter.
Name
Position
Office
Age
Salary
Name
Position
Office
Age
Salary
Tiger Nixon
System Architect
Edinburgh
61
$320,800
Garrett Winters
Accountant
Tokyo
63
$170,750
Ashton Cox
Junior Technical Author
San Francisco
66
$86,000
Cedric Kelly
Senior Javascript Developer
Edinburgh
22
$433,060
Airi Satou
Accountant
Tokyo
33
$162,700
Brielle Williamson
Integration Specialist
New York
61
$372,000
Herrod Chandler
Sales Assistant
San Francisco
59
$137,500
Rhona Davidson
Integration Specialist
Tokyo
55
$327,900
Colleen Hurst
Javascript Developer
San Francisco
39
$205,500
Sonya Frost
Software Engineer
Edinburgh
23
$103,600
Jena Gaines
Office Manager
London
30
$90,560
Quinn Flynn
Support Lead
Edinburgh
22
$342,000
Charde Marshall
Regional Director
San Francisco
36
$470,600
Haley Kennedy
Senior Marketing Designer
London
43
$313,500
Tatyana Fitzpatrick
Regional Director
London
19
$385,750
Michael Silva
Marketing Designer
London
66
$198,500
Paul Byrd
Chief Financial Officer (CFO)
New York
64
$725,000
Gloria Little
Systems Administrator
New York
59
$237,500
Bradley Greer
Software Engineer
London
41
$132,000
Dai Rios
Personnel Lead
Edinburgh
35
$217,500
Jenette Caldwell
Development Lead
New York
30
$345,000
Yuri Berry
Chief Marketing Officer (CMO)
New York
40
$675,000
Caesar Vance
Pre-Sales Support
New York
21
$106,450
Doris Wilder
Sales Assistant
Sidney
23
$85,600
Angelica Ramos
Chief Executive Officer (CEO)
London
47
$1,200,000
Gavin Joyce
Developer
Edinburgh
42
$92,575
Jennifer Chang
Regional Director
Singapore
28
$357,650
Brenden Wagner
Software Engineer
San Francisco
28
$206,850
Fiona Green
Chief Operating Officer (COO)
San Francisco
48
$850,000
Shou Itou
Regional Marketing
Tokyo
20
$163,000
Michelle House
Integration Specialist
Sidney
37
$95,400
Suki Burks
Developer
London
53
$114,500
Prescott Bartlett
Technical Author
London
27
$145,000
Gavin Cortez
Team Leader
San Francisco
22
$235,500
Martena Mccray
Post-Sales support
Edinburgh
46
$324,050
Unity Butler
Marketing Designer
San Francisco
47
$85,675
Howard Hatfield
Office Manager
San Francisco
51
$164,500
Hope Fuentes
Secretary
San Francisco
41
$109,850
Vivian Harrell
Financial Controller
San Francisco
62
$452,500
Timothy Mooney
Office Manager
London
37
$136,200
Jackson Bradshaw
Director
New York
65
$645,750
Olivia Liang
Support Engineer
Singapore
64
$234,500
Bruno Nash
Software Engineer
London
38
$163,500
Sakura Yamamoto
Support Engineer
Tokyo
37
$139,575
Thor Walton
Developer
New York
61
$98,540
Finn Camacho
Support Engineer
San Francisco
47
$87,500
Serge Baldwin
Data Coordinator
Singapore
64
$138,575
Zenaida Frank
Software Engineer
New York
63
$125,250
Zorita Serrano
Software Engineer
San Francisco
56
$115,000
Jennifer Acosta
Junior Javascript Developer
Edinburgh
43
$75,650
Cara Stevens
Sales Assistant
New York
46
$145,600
Hermione Butler
Regional Director
London
47
$356,250
Lael Greer
Systems Administrator
London
21
$103,500
Jonas Alexander
Developer
San Francisco
30
$86,500
Shad Decker
Regional Director
Edinburgh
51
$183,000
Michael Bruce
Javascript Developer
Singapore
29
$183,000
Donna Snider
Customer Support
New York
27
$112,000
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.