DataTable Example
Using DataTables, add advanced interaction controls to your HTML tables. It is a highly flexible tool and all advanced features allow you to display table instantly and nice way.
Check out the documentation for a full overview.
Data Table
Using the most basic table markup, here’s how .table based tables look by default.
| 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 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Data Table with Export
To intialize datatable with export buttons, use .datatable-init-export with table element.
Please Note By default export libraries is not added globally, so please include "js/libs/datatable-btns.js" into your page to active export buttons.
Export
| 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 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Data Table
Using the most basic table markup, here’s how .table based tables look by default.
|
| User | Balance | Phone | Verified | Last Login | Status | |
|---|---|---|---|---|---|---|---|
|
|
AB
Abu Bin Ishtiyak
info@softnio.com
|
35040.34 USD | +811 847-4958 |
|
05 Oct 2019 | Active | |
|
|
AL
Ashley Lawson
ashley@softnio.com
|
580.00 USD | +124 394-1787 |
|
07 Feb 2020 | Pending | |
|
|
JL
Joe Larson
larson@example.com
|
32,000.34 USD | +168 603-2320 |
|
04 Feb 2020 | Active | |
|
|
JM
Jane Montgomery
jane84@example.com
|
0.00 USD | +439 271-5360 |
|
01 Feb 2020 | Suspend | |
|
|
FB
Frances Burns
info@softnio.com
|
42.50 USD | +639 130-3150 |
|
31 Jan 2020 | Active | |
|
|
AB
Alan Butler
butler@example.com
|
440.34 USD | +963 309-1706 |
|
18 Jan 2020 | Inactive | |
|
|
VL
Victoria Lynch
victoria@example.com
|
59,400.68 USD | +811 985-4846 |
|
15 Jan 2020 | Active | |
|
|
PN
Patrick Newman
patrick@example.com
|
30.00 USD | +942 238-4474 |
|
08 Jan 2020 | Active | |
|
|
JL
Joe Larson
larson@example.com
|
32,000.34 USD | +168 603-2320 |
|
04 Feb 2020 | Active | |
|
|
AL
Ashley Lawson
ashley@softnio.com
|
580.00 USD | +124 394-1787 |
|
07 Feb 2020 | Pending |
