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
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
![]() 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 |
Name | Position | Office | Age | Start date | Salary |
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.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
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 |
Name | Position | Office | Age | Start date | Salary |
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.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
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 |
Name | Position | Office | Age | Start date | Salary |
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.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
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 |
Name | Position | Office | Age | Start date | Salary |