DOM/Jquery
Events assigned to the table can be exceptionally useful for user interaction, however you must be aware
that DataTables will add and remove rows from the DOM as they are needed (i.e. when paging only the visible
elements are actually available in the DOM). As such, this can lead to the odd hiccup when working with events.
Name |
Position |
Office |
Age |
Start date |
Salary |
Tiger Nixon |
System Architect |
Edinburgh |
61 |
2011/04/25 |
$320,800 |
Garrett Winters |
Accountant |
Tokyo |
63 |
2011/07/25 |
$170,750 |
Ashton Cox |
Junior Technical Author |
San Francisco |
66 |
2009/01/12 |
$86,000 |
Cedric Kelly |
Senior Javascript Developer |
Edinburgh |
22 |
2012/03/29 |
$433,060 |
Airi Satou |
Accountant |
Tokyo |
33 |
2008/11/28 |
$162,700 |
Brielle Williamson |
Integration Specialist |
New York |
61 |
2012/12/02 |
$372,000 |
Herrod Chandler |
Sales Assistant |
San Francisco |
59 |
2012/08/06 |
$137,500 |
Rhona Davidson |
Integration Specialist |
Tokyo |
55 |
2010/10/14 |
$327,900 |
Colleen Hurst |
Javascript Developer |
San Francisco |
39 |
2009/09/15 |
$205,500 |
Sonya Frost |
Software Engineer |
Edinburgh |
23 |
2008/12/13 |
$103,600 |
Jena Gaines |
Office Manager |
London |
30 |
2008/12/19 |
$90,560 |
Quinn Flynn |
Support Lead |
Edinburgh |
22 |
2013/03/03 |
$342,000 |
Charde Marshall |
Regional Director |
San Francisco |
36 |
2008/10/16 |
$470,600 |
Haley Kennedy |
Senior Marketing Designer |
London |
43 |
2012/12/18 |
$313,500 |
Tatyana Fitzpatrick |
Regional Director |
London |
19 |
2010/03/17 |
$385,750 |
Michael Silva |
Marketing Designer |
London |
66 |
2012/11/27 |
$198,500 |
Paul Byrd |
Chief Financial Officer (CFO) |
New York |
64 |
2010/06/09 |
$725,000 |
Gloria Little |
Systems Administrator |
New York |
59 |
2009/04/10 |
$237,500 |
Bradley Greer |
Software Engineer |
London |
41 |
2012/10/13 |
$132,000 |
Dai Rios |
Personnel Lead |
Edinburgh |
35 |
2012/09/26 |
$217,500 |
Name |
Position |
Office |
Age |
Start date |
Salary |
Column Rendering
Each column has an optional rendering control called columns.render which can be used to process the
content of each cell before the data is used. columns.render has a wide array of options available to it for
rendering different types of data orthogonally (ordering, searching, display etc), but it can be used very
simply to manipulate the content of a cell, as shown here.
Name |
Position |
Office |
Age |
Start date |
Salary |
Tiger Nixon |
System Architect |
Edinburgh |
61 |
2011/04/25 |
$320,800 |
Garrett Winters |
Accountant |
Tokyo |
63 |
2011/07/25 |
$170,750 |
Ashton Cox |
Junior Technical Author |
San Francisco |
66 |
2009/01/12 |
$86,000 |
Cedric Kelly |
Senior Javascript Developer |
Edinburgh |
22 |
2012/03/29 |
$433,060 |
Airi Satou |
Accountant |
Tokyo |
33 |
2008/11/28 |
$162,700 |
Brielle Williamson |
Integration Specialist |
New York |
61 |
2012/12/02 |
$372,000 |
Herrod Chandler |
Sales Assistant |
San Francisco |
59 |
2012/08/06 |
$137,500 |
Rhona Davidson |
Integration Specialist |
Tokyo |
55 |
2010/10/14 |
$327,900 |
Colleen Hurst |
Javascript Developer |
San Francisco |
39 |
2009/09/15 |
$205,500 |
Sonya Frost |
Software Engineer |
Edinburgh |
23 |
2008/12/13 |
$103,600 |
Jena Gaines |
Office Manager |
London |
30 |
2008/12/19 |
$90,560 |
Quinn Flynn |
Support Lead |
Edinburgh |
22 |
2013/03/03 |
$342,000 |
Charde Marshall |
Regional Director |
San Francisco |
36 |
2008/10/16 |
$470,600 |
Haley Kennedy |
Senior Marketing Designer |
London |
43 |
2012/12/18 |
$313,500 |
Tatyana Fitzpatrick |
Regional Director |
London |
19 |
2010/03/17 |
$385,750 |
Michael Silva |
Marketing Designer |
London |
66 |
2012/11/27 |
$198,500 |
Paul Byrd |
Chief Financial Officer (CFO) |
New York |
64 |
2010/06/09 |
$725,000 |
Gloria Little |
Systems Administrator |
New York |
59 |
2009/04/10 |
$237,500 |
Bradley Greer |
Software Engineer |
London |
41 |
2012/10/13 |
$132,000 |
Dai Rios |
Personnel Lead |
Edinburgh |
35 |
2012/09/26 |
$217,500 |
Name |
Position |
Office |
Age |
Start date |
Salary |
Multiple Table Control Elements
As is described by the basic DOM positioning example you can use the dom initialization parameter to move
DataTables features around the table to where you want them.
Name |
Position |
Office |
Age |
Start date |
Salary |
Tiger Nixon |
System Architect |
Edinburgh |
61 |
2011/04/25 |
$320,800 |
Garrett Winters |
Accountant |
Tokyo |
63 |
2011/07/25 |
$170,750 |
Ashton Cox |
Junior Technical Author |
San Francisco |
66 |
2009/01/12 |
$86,000 |
Cedric Kelly |
Senior Javascript Developer |
Edinburgh |
22 |
2012/03/29 |
$433,060 |
Airi Satou |
Accountant |
Tokyo |
33 |
2008/11/28 |
$162,700 |
Brielle Williamson |
Integration Specialist |
New York |
61 |
2012/12/02 |
$372,000 |
Herrod Chandler |
Sales Assistant |
San Francisco |
59 |
2012/08/06 |
$137,500 |
Rhona Davidson |
Integration Specialist |
Tokyo |
55 |
2010/10/14 |
$327,900 |
Colleen Hurst |
Javascript Developer |
San Francisco |
39 |
2009/09/15 |
$205,500 |
Sonya Frost |
Software Engineer |
Edinburgh |
23 |
2008/12/13 |
$103,600 |
Jena Gaines |
Office Manager |
London |
30 |
2008/12/19 |
$90,560 |
Quinn Flynn |
Support Lead |
Edinburgh |
22 |
2013/03/03 |
$342,000 |
Charde Marshall |
Regional Director |
San Francisco |
36 |
2008/10/16 |
$470,600 |
Haley Kennedy |
Senior Marketing Designer |
London |
43 |
2012/12/18 |
$313,500 |
Tatyana Fitzpatrick |
Regional Director |
London |
19 |
2010/03/17 |
$385,750 |
Michael Silva |
Marketing Designer |
London |
66 |
2012/11/27 |
$198,500 |
Paul Byrd |
Chief Financial Officer (CFO) |
New York |
64 |
2010/06/09 |
$725,000 |
Gloria Little |
Systems Administrator |
New York |
59 |
2009/04/10 |
$237,500 |
Bradley Greer |
Software Engineer |
London |
41 |
2012/10/13 |
$132,000 |
Dai Rios |
Personnel Lead |
Edinburgh |
35 |
2012/09/26 |
$217,500 |
Name |
Position |
Office |
Age |
Start date |
Salary |
Complex Headers With Column Visibility
Complex headers (using colspan / rowspan) can be used to group columns of similar information in
DataTables, creating a very powerful visual effect.
In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when working
with hidden columns. The colspan and rowspan attributes for each cell are automatically calculated and
rendered on the page for you. This allows the columns.visible option and column().visible() method to take
into account rowspan / colspan cells, drawing the header correctly.
Language File
As well as being able to pass language information to DataTables through the language initialization
option, you can also store the language information in a file, which DataTables can load by Ajax using the
language.url option.
Name |
Position |
Office |
Age |
Start date |
Salary |
Tiger Nixon |
System Architect |
Edinburgh |
61 |
2011/04/25 |
$320,800 |
Garrett Winters |
Accountant |
Tokyo |
63 |
2011/07/25 |
$170,750 |
Ashton Cox |
Junior Technical Author |
San Francisco |
66 |
2009/01/12 |
$86,000 |
Cedric Kelly |
Senior Javascript Developer |
Edinburgh |
22 |
2012/03/29 |
$433,060 |
Airi Satou |
Accountant |
Tokyo |
33 |
2008/11/28 |
$162,700 |
Brielle Williamson |
Integration Specialist |
New York |
61 |
2012/12/02 |
$372,000 |
Herrod Chandler |
Sales Assistant |
San Francisco |
59 |
2012/08/06 |
$137,500 |
Rhona Davidson |
Integration Specialist |
Tokyo |
55 |
2010/10/14 |
$327,900 |
Colleen Hurst |
Javascript Developer |
San Francisco |
39 |
2009/09/15 |
$205,500 |
Sonya Frost |
Software Engineer |
Edinburgh |
23 |
2008/12/13 |
$103,600 |
Jena Gaines |
Office Manager |
London |
30 |
2008/12/19 |
$90,560 |
Quinn Flynn |
Support Lead |
Edinburgh |
22 |
2013/03/03 |
$342,000 |
Charde Marshall |
Regional Director |
San Francisco |
36 |
2008/10/16 |
$470,600 |
Haley Kennedy |
Senior Marketing Designer |
London |
43 |
2012/12/18 |
$313,500 |
Tatyana Fitzpatrick |
Regional Director |
London |
19 |
2010/03/17 |
$385,750 |
Michael Silva |
Marketing Designer |
London |
66 |
2012/11/27 |
$198,500 |
Paul Byrd |
Chief Financial Officer (CFO) |
New York |
64 |
2010/06/09 |
$725,000 |
Gloria Little |
Systems Administrator |
New York |
59 |
2009/04/10 |
$237,500 |
Bradley Greer |
Software Engineer |
London |
41 |
2012/10/13 |
$132,000 |
Dai Rios |
Personnel Lead |
Edinburgh |
35 |
2012/09/26 |
$217,500 |
Name |
Position |
Office |
Age |
Start date |
Salary |
Setting Defaults
When working with DataTables over multiple pages it is often useful to set the initialization defaults to
common values (for example you might want to set dom to a common value so all tables get the same layout).
This can be done using the $.fn.dataTable.defaults object. This object will take all of the same parameters
as the DataTables initialization object, but in this case you are setting the default for all future
initializations of DataTables.
Name |
Position |
Office |
Age |
Start date |
Salary |
Tiger Nixon |
System Architect |
Edinburgh |
61 |
2011/04/25 |
$320,800 |
Garrett Winters |
Accountant |
Tokyo |
63 |
2011/07/25 |
$170,750 |
Ashton Cox |
Junior Technical Author |
San Francisco |
66 |
2009/01/12 |
$86,000 |
Cedric Kelly |
Senior Javascript Developer |
Edinburgh |
22 |
2012/03/29 |
$433,060 |
Airi Satou |
Accountant |
Tokyo |
33 |
2008/11/28 |
$162,700 |
Brielle Williamson |
Integration Specialist |
New York |
61 |
2012/12/02 |
$372,000 |
Herrod Chandler |
Sales Assistant |
San Francisco |
59 |
2012/08/06 |
$137,500 |
Rhona Davidson |
Integration Specialist |
Tokyo |
55 |
2010/10/14 |
$327,900 |
Colleen Hurst |
Javascript Developer |
San Francisco |
39 |
2009/09/15 |
$205,500 |
Sonya Frost |
Software Engineer |
Edinburgh |
23 |
2008/12/13 |
$103,600 |
Jena Gaines |
Office Manager |
London |
30 |
2008/12/19 |
$90,560 |
Quinn Flynn |
Support Lead |
Edinburgh |
22 |
2013/03/03 |
$342,000 |
Charde Marshall |
Regional Director |
San Francisco |
36 |
2008/10/16 |
$470,600 |
Haley Kennedy |
Senior Marketing Designer |
London |
43 |
2012/12/18 |
$313,500 |
Tatyana Fitzpatrick |
Regional Director |
London |
19 |
2010/03/17 |
$385,750 |
Michael Silva |
Marketing Designer |
London |
66 |
2012/11/27 |
$198,500 |
Paul Byrd |
Chief Financial Officer (CFO) |
New York |
64 |
2010/06/09 |
$725,000 |
Gloria Little |
Systems Administrator |
New York |
59 |
2009/04/10 |
$237,500 |
Bradley Greer |
Software Engineer |
London |
41 |
2012/10/13 |
$132,000 |
Dai Rios |
Personnel Lead |
Edinburgh |
35 |
2012/09/26 |
$217,500 |
Name |
Position |
Office |
Age |
Start date |
Salary |
Row Grouping
Although DataTables doesn't have row grouping built-in (picking one of the many methods available would
overly limit the DataTables core), it is most certainly possible to give the look and feel of row
grouping.
Name |
Position |
Office |
Age |
Start date |
Salary |
Tiger Nixon |
System Architect |
Edinburgh |
61 |
2011/04/25 |
$320,800 |
Garrett Winters |
Accountant |
Tokyo |
63 |
2011/07/25 |
$170,750 |
Ashton Cox |
Junior Technical Author |
San Francisco |
66 |
2009/01/12 |
$86,000 |
Cedric Kelly |
Senior Javascript Developer |
Edinburgh |
22 |
2012/03/29 |
$433,060 |
Airi Satou |
Accountant |
Tokyo |
33 |
2008/11/28 |
$162,700 |
Brielle Williamson |
Integration Specialist |
New York |
61 |
2012/12/02 |
$372,000 |
Herrod Chandler |
Sales Assistant |
San Francisco |
59 |
2012/08/06 |
$137,500 |
Rhona Davidson |
Integration Specialist |
Tokyo |
55 |
2010/10/14 |
$327,900 |
Colleen Hurst |
Javascript Developer |
San Francisco |
39 |
2009/09/15 |
$205,500 |
Sonya Frost |
Software Engineer |
Edinburgh |
23 |
2008/12/13 |
$103,600 |
Jena Gaines |
Office Manager |
London |
30 |
2008/12/19 |
$90,560 |
Quinn Flynn |
Support Lead |
Edinburgh |
22 |
2013/03/03 |
$342,000 |
Charde Marshall |
Regional Director |
San Francisco |
36 |
2008/10/16 |
$470,600 |
Haley Kennedy |
Senior Marketing Designer |
London |
43 |
2012/12/18 |
$313,500 |
Tatyana Fitzpatrick |
Regional Director |
London |
19 |
2010/03/17 |
$385,750 |
Michael Silva |
Marketing Designer |
London |
66 |
2012/11/27 |
$198,500 |
Paul Byrd |
Chief Financial Officer (CFO) |
New York |
64 |
2010/06/09 |
$725,000 |
Gloria Little |
Systems Administrator |
New York |
59 |
2009/04/10 |
$237,500 |
Bradley Greer |
Software Engineer |
London |
41 |
2012/10/13 |
$132,000 |
Dai Rios |
Personnel Lead |
Edinburgh |
35 |
2012/09/26 |
$217,500 |
Name |
Position |
Office |
Age |
Start date |
Salary |
Footer Callback
Through the use of the header and footer callback manipulation functions provided by DataTables
(headerCallback and footerCallback), it is possible to perform some powerful and useful data manipulation
functions, such as summarising data in the table.
Custom Toolbar Elements
DataTables inserts DOM elements around the table to control DataTables features, and you can make use of
this mechanism as well to insert your own custom elements. In this example a div with a class of '-string
toolbar' is created using dom, and jQuery then used to insert HTML into that element to create the toolbar.
You could put whatever HTML you want into the toolbar!
Row Created Callback
The following example shows how a callback function can be used to format a particular row at draw time.
For each row that is generated for display, the createdRow function is called once and once only. It is
passed the create row node which can then be modified.
Name |
Position |
Office |
Age |
Start date |
Salary |
Tiger Nixon |
System Architect |
Edinburgh |
61 |
2011/04/25 |
$320,800 |
Garrett Winters |
Accountant |
Tokyo |
63 |
2011/07/25 |
$170,750 |
Ashton Cox |
Junior Technical Author |
San Francisco |
66 |
2009/01/12 |
$86,000 |
Cedric Kelly |
Senior Javascript Developer |
Edinburgh |
22 |
2012/03/29 |
$433,060 |
Airi Satou |
Accountant |
Tokyo |
33 |
2008/11/28 |
$162,700 |
Brielle Williamson |
Integration Specialist |
New York |
61 |
2012/12/02 |
$372,000 |
Herrod Chandler |
Sales Assistant |
San Francisco |
59 |
2012/08/06 |
$137,500 |
Rhona Davidson |
Integration Specialist |
Tokyo |
55 |
2010/10/14 |
$327,900 |
Colleen Hurst |
Javascript Developer |
San Francisco |
39 |
2009/09/15 |
$205,500 |
Sonya Frost |
Software Engineer |
Edinburgh |
23 |
2008/12/13 |
$103,600 |
Jena Gaines |
Office Manager |
London |
30 |
2008/12/19 |
$90,560 |
Quinn Flynn |
Support Lead |
Edinburgh |
22 |
2013/03/03 |
$342,000 |
Charde Marshall |
Regional Director |
San Francisco |
36 |
2008/10/16 |
$470,600 |
Haley Kennedy |
Senior Marketing Designer |
London |
43 |
2012/12/18 |
$313,500 |
Tatyana Fitzpatrick |
Regional Director |
London |
19 |
2010/03/17 |
$385,750 |
Michael Silva |
Marketing Designer |
London |
66 |
2012/11/27 |
$198,500 |
Paul Byrd |
Chief Financial Officer (CFO) |
New York |
64 |
2010/06/09 |
$725,000 |
Gloria Little |
Systems Administrator |
New York |
59 |
2009/04/10 |
$237,500 |
Bradley Greer |
Software Engineer |
London |
41 |
2012/10/13 |
$132,000 |
Dai Rios |
Personnel Lead |
Edinburgh |
35 |
2012/09/26 |
$217,500 |
Name |
Position |
Office |
Age |
Start date |
Salary |