Need Help ?

Submit enquiry here Buy Now

Plugin DataTable

  2. Data Tables
  3. Plugin DataTable
API plug-in methods
The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:
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
Ordering plug-ins (with type detection)
This example shows ordering with using an enumerated type.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 Low
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 High
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 Low
Bradley Greer Software Engineer London 41 2012/10/13 Low
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 Low
Brielle Williamson Integration Specialist New York 61 2012/12/02 Medium
Bruno Nash Software Engineer London 38 2011/05/03 Low
Caesar Vance Pre-Sales Support New York 21 2011/12/12 Low
Cara Stevens Sales Assistant New York 46 2011/12/06 Low
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 Medium
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
Custom filtering - range search
This example shows a search being performed on the age column in the data, based upon two inputs.
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
Live DOM ordering
This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.
NameAgePositionOffice
Airi Satou
Angelica Ramos
Ashton Cox
Bradley Greer
Brenden Wagner
Brielle Williamson
Bruno Nash
Caesar Vance
Cara Stevens
Cedric Kelly
NameAgePositionOffice
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