Need Help ?

Submit enquiry here Buy Now

Advanced DataTables

  2. Data Tables
  3. Advanced DataTables
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.One of the best ways of dealing with this is through the use of delegated events with jQuery's on method, as shown in this example. This example also uses the DataTablesrow().data()API method to retrieve information about the selected row - the row's data so we can show it in the alert message in this case.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
DataTables events
DataTables fires a number of custom events which you can bind to in the standard jQuery fashion (although note that the namespace dtmust be used), allowing your code to perform custom actions when these events occur.All custom events fired by DataTables are fired with the namespace dt in order to prevent conflicts arising with other jQuery plug-ins which also fire events. The DataTables on().API method can be used like the jQuery on() method, but will automatically append the dt namespace if required.This example shows the use of the order:event, search:event and page:event events by adding a notification that the event fired to an element on the page to show that they have indeed fired.
Search event - 1752422511754
Order event - 1752422511759
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
Column rendering
Each column has an optional rendering control called columns.render:optionwhich can be used to process the content of each cell before the data is used. columns.render:optionhas 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. This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links, assigning colours based on content rules and any other form of text manipulation you require.
NamePositionOfficeStart dateSalary
Airi Satou (33) Accountant Tokyo 2008/11/28 $162,700
Angelica Ramos (47) Chief Executive Officer (CEO) London 2009/10/09 $1,200,000
Ashton Cox (66) Junior Technical Author San Francisco 2009/01/12 $86,000
Bradley Greer (41) Software Engineer London 2012/10/13 $132,000
Brenden Wagner (28) Software Engineer San Francisco 2011/06/07 $206,850
Brielle Williamson (61) Integration Specialist New York 2012/12/02 $372,000
Bruno Nash (38) Software Engineer London 2011/05/03 $163,500
Caesar Vance (21) Pre-Sales Support New York 2011/12/12 $106,450
Cara Stevens (46) Sales Assistant New York 2011/12/06 $145,600
Cedric Kelly (22) Senior Javascript Developer Edinburgh 2012/03/29 $433,060
NamePositionOfficeStart dateSalary
Showing 1 to 10 of 57 entries
Page length options
It is possible to easily customise the options shown in the length menu (by default at the top left of the table) using the lengthMenu initialisation option.This parameter can take one of two forms:
  • A 1D array of options which will be used for both the displayed option and the value, or
  • A 2D array in which the first array is used to define the value options and the second array the displayed options (useful for language strings such as 'All').
The example below shows a 2D array being used to include a "Show all" records option.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
Multiple table control elements
As is described by the basic DOM positioning example you can use the dom initialisation parameter to move DataTables features around the table to where you want them.In addition to this, you can also use dom:option to create multiple instances of these table controls. Simply include the feature's identification letter where you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table (t:string) should be included only once).This is shown in the demo below where the four key built-in features are duplicated above and below the table.
Showing 1 to 10 of 57 entries
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
123456
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 rowspan 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 thecolumns.visible:optionoption andcolumn().visible():API method to take into account rowspan / colspan cells, drawing the header correctly.Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables can use that cell to detect the column and use it to apply ordering.The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.
NameHR InformationContact
PositionSalaryOfficeExtn.
Airi Satou Accountant $162,700 Tokyo 5407
Angelica Ramos Chief Executive Officer (CEO) $1,200,000 London 5797
Ashton Cox Junior Technical Author $86,000 San Francisco 1562
Bradley Greer Software Engineer $132,000 London 2558
Brenden Wagner Software Engineer $206,850 San Francisco 1314
Brielle Williamson Integration Specialist $372,000 New York 4804
Bruno Nash Software Engineer $163,500 London 6222
Caesar Vance Pre-Sales Support $106,450 New York 8330
Cara Stevens Sales Assistant $145,600 New York 3990
Cedric Kelly Senior Javascript Developer $433,060 Edinburgh 6224
NamePositionSalaryOfficeExtn.
Showing 1 to 10 of 57 entries
Read HTML to data objects
When DataTables reads the table content from an HTML table (rather than an Ajax or Javascript data source), by default it will read the information in the table into an array that DataTables stores internally. Each array element represents a column.It can be very useful to have DataTables read the information into an object rather than an array, an option that can be triggered using thecolumns.data:option initialisation option to define how you want the data to be stored. Typically columns.data:option is used with Ajax sourced data to tell DataTables where to read data from, but as can be seen here it also tells DataTables where to write the data to.This ability to store data into an object can be very useful when working with the DataTables API after the table has been initialised.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
Language file
As well as being able to pass language information to DataTables through the language:optioninitialisation option, you can also store the language information in a file, which DataTables can load by Ajax using the language.url:optionoption.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
NamePositionOfficeAgeStart dateSalary
1 bis 10 von 57 Einträgen
Setting defaults
When working with DataTables over multiple pages it is often useful to set the initialisation defaults to common values (for example you might want to setdom:option 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 initialisation object, but in this case you are setting the default for all future initialisations of DataTables.This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised.
NamePositionOfficeAgeStart dateSalary
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
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
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, thecreatedRow:option function is called once and once only. It is passed the create row node which can then be modified. In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than $150,000. Note that columns.createdCell could also be used to create exactly the same effect.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
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.In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator is added by the drawCallback:option function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A click event handler is added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.
Footer callback
Through the use of the header and footer callback manipulation functions provided by DataTables (headerCallback:option and footerCallback:option), it is possible to perform some powerful and useful data manipulation functions, such as summarising data in the table.The example below shows a footer callback being used to total the data for a column (both the visible and the hidden data) using the column().data():API API method and column().footer():API for writing the value into the footer.
Footer callback
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! For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins which are used in a table by a single character reference in the dom option (like the built in option of f refers to 'filtering input', you could have an F option which creates your own filtering input control, custom to your app). There are a number of extensions for DataTables that make use of this ability. For example, Buttons is a feature plug-in for DataTables that adds buttons into a toolbar for a table (copy to clipboard, save to Excel / PDF, and more).
Hello This is custom toolbar
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
Order direction sequence control
At times you may wish to change the default ordering direction sequence for columns (some or all of them) to be 'descending' rather than DataTables' default ascending. This can be done through the use of the columns.orderSequence:option initialisation parameter. This parameter also allows you to limit the ordering to a single direction, or you could add complex behaviour to the ordering interaction.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
Preview Settings

Try It Real Time

Layout Type
    • LTR
    • RTL
    • Box
Sidebar Type
Unlimited Color
Light layout
Dark Layout
Mix Layout