loader

Datatable Basic

Zero Configuration

DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: $().DataTable();. You can refer full documentation from here Datatables

NamePositionOfficeAgeStart dateSalary
Airi Satou
Accountant Tokyo 33 2008/11/28 $162,700
Ashton Cox
Junior Technical Author San Francisco 66 2009/01/12 $86,000
Brielle Williamson
Integration Specialist New York 61 2012/12/02 $372,000
Cedric Kelly
Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Garrett Winters
Accountant Tokyo 63 2011/07/25 $170,750
Herrod Chandler
Sales Assistant San Francisco 59 2012/08/06 $137,500
Tiger Nixon
System Architect Edinburgh 61 2011/04/25 $320,800
Angelica Ramos
Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Bradley Greer
Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner
Software Engineer San Francisco 28 2011/06/07 $206,850
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
Default Ordering

With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the order | option order initialisation parameter, you can set the table to display the data in exactly the order that you want.

NamePositionOfficeAgeStart dateSalary
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Jackson Bradshaw Director New York 65 2008/09/26 $645,750
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
Multi-column ordering

On a per-column basis (i.e. order by a specific column and then a secondary column if the data in the first column is identical), through the columns.orderData option.

DOM Positioning

When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the dom initialisation parameter which can be set to indicate where you wish particular features to appear in the DOM. You can also specify div wrapping containers (with an id and / or class) to provide complete layout flexibility.

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
Alternative Pagination

The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the pagingType 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

Settings

Theme
Theme Direction
Theme Colors
Layout Type
Container Option
Sidebar Type
Card With