Basic Init | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Basic DataTables

##### 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();` .

Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.

Name | Position | Office | Age | Start date | Salary | Action
--- | --- | --- | --- | --- | --- | ---

Tiger Nixon

System Architect

Edinburgh

61

25/04/2011

$320,800

Garrett Winters

Accountant

Tokyo

63

25/07/2015

$170,750

Ashton Cox

Junior Technical Author

San Francisco

66

12/01/2009

$86,000

Cedric Kelly

Senior Javascript Developer

Edinburgh

22

29/03/2016

$433,060

Airi Satou

Accountant

Tokyo

33

28/11/2008

$162,700

Brielle Williamson

Integration Specialist

New York

61

02/12/2012

$372,000

Herrod Chandler

Sales Assistant

San Francisco

59

06/08/2012

$137,500

Rhona Davidson

Integration Specialist

Tokyo

55

14/10/2010

$327,900

Colleen Hurst

Javascript Developer

San Francisco

39

15/09/2009

$205,500

Sonya Frost

Software Engineer

Edinburgh

23

13/12/2008

$103,600

Jena Gaines

Office Manager

London

30

19/12/2008

$90,560

Quinn Flynn

Support Lead

Edinburgh

22

03/03/2013

$342,000

Charde Marshall

Regional Director

San Francisco

36

16/10/2008

$470,600

Donna Snider

Customer Support

New York

27

25/01/2011

$112,000

Amir Reyes

JS Developer

US

22

21/07/2025

$148,450

Leon Mann

Software Engineer

UK

20

23/08/2025

$250,400

Eliezer Orr

Manager

New York

26

12/05/2023

$587,480

Ana Hanson

SEO

New York

28

05/09/2025

$145,000

Kaia Kline

HR

Singapore

24

18/09/2022

$600,580

Tori Hale

Customer Support

San Francisco

26

29/10/2025

$120,000

##### Complex Headers (rowspan and colspan)

When using tables to display data, you will often wish to display column information in groups. DataTables fully supports `colspan` and `rowspan` in the table's header, assigning the required order listeners to the `th tag` cells suitable for the columns the element covers.

DataTables will automatically apply ordering listeners and icons to all cells in the table header. If you wish to disable this, you can use the `data-dt-order` property on the`th/td` cells in the table header. The value of this attribute (if present, it is entirely optional) controls the ordering listeners and icons:

the HR info has `data-dt-order="disable"` applied to it. The other cells in the header are all clickable and have ordering status icons shown.

Name | HR Information | Contact
--- | --- | ---
Position | Salary | Office | CV | Status | E-mail | Action

Tiger Nixon

System Architect

$320,800

Edinburgh

hired

t.nixon@datatables.net

Garrett Winters

Accountant

$170,750

Tokyo

Pending

g.winters@datatables.net

Ashton Cox

Junior Technical Author

$86,000

San Francisco

in process

a.cox@datatables.net

Cedric Kelly

Senior Javascript Developer

$433,060

Edinburgh

in process

c.kelly@datatables.net

Airi Satou

Accountant

$162,700

Tokyo

hired

a.satou@datatables.net

Brielle Williamson

Integration Specialist

$372,000

New York

Pending

b.williamson@datatables.net

Herrod Chandler

Sales Assistant

$137,500

San Francisco

in process

h.chandler@datatables.net

Rhona Davidson

Integration Specialist

$327,900

Tokyo

hired

r.davidson@datatables.net

Colleen Hurst

Javascript Developer

$205,500

San Francisco

Pending

c.hurst@datatables.net

Sonya Frost

Software Engineer

$103,600

Edinburgh

in process

s.frost@datatables.net

Jena Gaines

Office Manager

$90,560

London

hired

j.gaines@datatables.net

Quinn Flynn

Support Lead

$342,000

Edinburgh

in process

q.flynn@datatables.net

Charde Marshall

Regional Director

$470,600

San Francisco

in process

c.marshall@datatables.net

Haley Kennedy

Senior Marketing Designer

$313,500

London

hired

h.kennedy@datatables.net

Tatyana Fitzpatrick

Regional Director

$385,750

London

Pending

t.fitzpatrick@datatables.net

Michael Silva

Marketing Designer

$198,500

London

in process

m.silva@datatables.net

Paul Byrd

Chief Financial Officer (CFO)

$725,000

New York

in process

p.byrd@datatables.net

Gloria Little

Systems Administrator

$237,500

New York

hired

g.little@datatables.net

Bradley Greer

Software Engineer

$132,000

London

Pending

b.greer@datatables.net

Dai Rios

Personnel Lead

$217,500

Edinburgh

in process

d.rios@datatables.net

Jenette Caldwell

Development Lead

$345,000

New York

hired

j.caldwell@datatables.net

Yuri Berry

Chief Marketing Officer (CMO)

$675,000

New York

Pending

y.berry@datatables.net

Caesar Vance

Pre-Sales Support

$106,450

New York

in process

c.vance@datatables.net

Doris Wilder

Sales Assistant

$85,600

Sidney

hired

d.wilder@datatables.net

Angelica Ramos

CEO

$1,200,000

London

Pending

a.ramos@datatables.net

Gavin Joyce

Developer

$92,575

Edinburgh

in process

g.joyce@datatables.net

Jennifer Chang

Regional Director

$357,650

Singapore

hired

j.chang@datatables.net

Brenden Wagner

Software Engineer

$206,850

San Francisco

hired

b.wagner@datatables.net

Fiona Green

Chief Operating Officer (COO)

$850,000

San Francisco

Pending

f.green@datatables.net

Shou Itou

Regional Marketing

$163,000

Tokyo

in process

s.itou@datatables.net

Michelle House

Integration Specialist

$95,400

Sidney

hired

m.house@datatables.net

Suki Burks

Developer

$114,500

London

Pending

s.burks@datatables.net

Prescott Bartlett

Technical Author

$145,000

London

in process

p.bartlett@datatables.net

Gavin Cortez

Team Leader

$235,500

San Francisco

hired

g.cortez@datatables.net

Martena Mccray

Post-Sales support

$324,050

Edinburgh

hired

m.mccray@datatables.net

Unity Butler

Marketing Designer

$85,675

San Francisco

Pending

u.butler@datatables.net

Howard Hatfield

Office Manager

$164,500

San Francisco

in process

h.hatfield@datatables.net

Hope Fuentes

Secretary

$109,850

San Francisco

hired

h.fuentes@datatables.net

Vivian Harrell

Financial Controller

$452,500

San Francisco

Pending

v.harrell@datatables.net

Timothy Mooney

Office Manager

$136,200

London

in process

t.mooney@datatables.net

Jackson Bradshaw

Director

$645,750

New York

hired

j.bradshaw@datatables.net

Olivia Liang

Support Engineer

$234,500

Singapore

Pending

o.liang@datatables.net

Bruno Nash

Software Engineer

$163,500

London

in process

b.nash@datatables.net

Sakura Yamamoto

Support Engineer

$139,575

Tokyo

Pending

s.yamamoto@datatables.net

Thor Walton

Developer

$98,540

New York

in process

t.walton@datatables.net

Finn Camacho

Support Engineer

$87,500

San Francisco

hired

f.camacho@datatables.net

Serge Baldwin

Data Coordinator

$138,575

Singapore

Pending

s.baldwin@datatables.net

Zenaida Frank

Software Engineer

$125,250

New York

in process

z.frank@datatables.net

Zorita Serrano

Software Engineer

$115,000

San Francisco

hired

z.serrano@datatables.net

Jennifer Acosta

Junior Javascript Developer

$75,650

Edinburgh

Pending

j.acosta@datatables.net

Cara Stevens

Sales Assistant

$145,600

New York

in process

c.stevens@datatables.net

Hermione Butler

Regional Director

$356,250

London

hired

h.butler@datatables.net

Lael Greer

Systems Administrator

$103,500

London

Pending

l.greer@datatables.net

Jonas Alexander

Developer

$86,500

San Francisco

in process

j.alexander@datatables.net

Shad Decker

Regional Director

$183,000

Edinburgh

hired

s.decker@datatables.net

Michael Bruce

Javascript Developer

$183,000

Singapore

hired

m.bruce@datatables.net

Donna Snider

Customer Support

$112,000

New York

hired

d.snider@datatables.net

Name | Position | Salary | Office | CV | Status | E-mail | Action

##### State Saving

DataTables saves the state of a table (its paging position, ordering state etc). When the `stateSave` option is enabled, it can be restored when the user reloads a page, or comes back to the page after visiting a sub-page.

The built in state saving method uses the HTML5 `localStorage` and `sessionStorage` APIs for efficient storage of the data. Please note that this means that the built in state saving option will not work with IE6/7 as these browsers do not support these APIs. Alternative options of using cookies or saving the state on the server through Ajax can be used through the `stateSaveCallback` and `stateLoadCallback` options.

The duration for which the saved state is valid and can be used to restore the table state can be set using the `stateDuration` initialisation parameter (2 hours by default). This parameter also controls if `localStorage` (0 or greater) or `sessionStorage` (-1) is used to store the data.

The example below simply shows state saving enabled in DataTables with the `stateSave` option.

Name | Position | Office | Age | Start Date | Salary | Action
--- | --- | --- | --- | --- | --- | ---

Tiger Nixon

System Architect

Edinburgh

61

25/04/2011

$320,800

Garrett Winters

Accountant

Tokyo

63

25/07/2015

$170,750

Ashton Cox

Junior Technical Author

San Francisco

66

12/01/2009

$86,000

Cedric Kelly

Senior Javascript Developer

Edinburgh

22

29/03/2016

$433,060

Airi Satou

Accountant

Tokyo

33

28/11/2008

$162,700

Brielle Williamson

Integration Specialist

New York

61

02/12/2012

$372,000

Herrod Chandler

Sales Assistant

San Francisco

59

06/08/2012

$137,500

Rhona Davidson

Integration Specialist

Tokyo

55

14/10/2010

$327,900

Colleen Hurst

Javascript Developer

San Francisco

39

15/09/2009

$205,500

Sonya Frost

Software Engineer

Edinburgh

23

13/12/2008

$103,600

Jena Gaines

Office Manager

London

30

19/12/2008

$90,560

Quinn Flynn

Support Lead

Edinburgh

22

03/03/2013

$342,000

Charde Marshall

Regional Director

San Francisco

36

16/10/2008

$470,600

Haley Kennedy

Senior Marketing Designer

London

43

18/12/2012

$313,500

Tatyana Fitzpatrick

Regional Director

London

19

17/03/2010

$385,750

Michael Silva

Marketing Designer

London

66

27/11/2012

$198,500

Paul Byrd

Chief Financial Officer (CFO)

New York

64

09/06/2010

$725,000

Gloria Little

Systems Administrator

New York

59

10/04/2009

$237,500

Bradley Greer

Software Engineer

London

41

13/10/2025

$132,000

Dai Rios

Personnel Lead

Edinburgh

35

26/09/2022

$217,500

Jenette Caldwell

Development Lead

New York

30

03/09/2009

$345,000

Yuri Berry

Chief Marketing Officer (CMO)

New York

40

25/06/2009

$675,000

Caesar Vance

Pre-Sales Support

New York

21

12/12/2016

$106,450

Doris Wilder

Sales Assistant

Sidney

23

20/09/2008

$85,600

Angelica Ramos

Chief Executive Officer (CEO)

London

47

09/10/2021

$1,200,000

Gavin Joyce

Developer

Edinburgh

42

22/12/2025

$92,575

Jennifer Chang

Regional Director

Singapore

28

14/11/2023

$357,650

Brenden Wagner

Software Engineer

San Francisco

28

07/06/2020

$206,850

Fiona Green

Chief Operating Officer (COO)

San Francisco

48

11/03/2010

$850,000

Shou Itou

Regional Marketing

Tokyo

20

14/08/2008

$163,000

Michelle House

Integration Specialist

Sidney

37

02/06/2011

$95,400

Suki Burks

Developer

London

53

22/10/2009

$114,500

Prescott Bartlett

Technical Author

London

27

07/05/2005

$145,000

Gavin Cortez

Team Leader

San Francisco

22

26/10/2023

$235,500

Martena Mccray

Post-Sales support

Edinburgh

46

09/03/2011

$324,050

Unity Butler

Marketing Designer

San Francisco

47

09/12/2009

$85,675

Howard Hatfield

Office Manager

San Francisco

51

16/12/2016

$164,500

Hope Fuentes

Secretary

San Francisco

41

2010/02/12

$109,850

Vivian Harrell

Financial Controller

San Francisco

62

14/02/2015

$452,500

Timothy Mooney

Office Manager

London

37

11/12/2016

$136,200

Jackson Bradshaw

Director

New York

65

26/09/2025

$645,750

Olivia Liang

Support Engineer

Singapore

64

13/02/2017

$234,500

Bruno Nash

Software Engineer

London

38

03/05/2014

$163,500

Sakura Yamamoto

Support Engineer

Tokyo

37

19/08/2014

$139,575

Thor Walton

Developer

New York

61

11/08/2013

$98,540

Finn Camacho

Support Engineer

San Francisco

47

07/07/2009

$87,500

Serge Baldwin

Data Coordinator

Singapore

64

09/04/2015

$138,575

Zenaida Frank

Software Engineer

New York

63

04/01/2010

$125,250

Zorita Serrano

Software Engineer

San Francisco

56

01/06/2010

$115,000

Jennifer Acosta

Junior Javascript Developer

Edinburgh

43

20/02/2012

$75,650

Cara Stevens

Sales Assistant

New York

46

06/12/2016

$145,600

Hermione Butler

Regional Director

London

47

21/03/2018

$356,250

Lael Greer

Systems Administrator

London

21

27/02/2019

$103,500

Jonas Alexander

Developer

San Francisco

30

14/07/2010

$86,500

Shad Decker

Regional Director

Edinburgh

51

13/11/2008

$183,000

Michael Bruce

Javascript Developer

Singapore

29

27/06/2011

$183,000

Donna Snider

Customer Support

New York

27

25/01/2011

$112,000

Name | Position | Office | Age | Start date | Salary | Action

##### Scroll - vertical, dynamic height

This example shows a vertically scrolling DataTable that makes use of the CSS3 vh unit in order to dynamically resize the viewport based on the browser window height. The vh unit is effectively a percentage of the browser window height. So the 50vh used in this example is 50% of the window height. The viewport size will update dynamically as the window is resized.

A relatively modern browser is required for vh units to operate correctly. IE9+ supports the vh unit and all other evergreen browsers.

Name | Position | Office | Age | Start Date | Salary | Action
--- | --- | --- | --- | --- | --- | ---

Tiger Nixon

System Architect

Edinburgh

61

25/04/2011

$320,800

Garrett Winters

Accountant

Tokyo

63

25/07/2015

$170,750

Ashton Cox

Junior Technical Author

San Francisco

66

12/01/2009

$86,000

Cedric Kelly

JS Developer

Edinburgh

22

29/03/2016

$433,060

Airi Satou

Accountant

Tokyo

33

28/11/2008

$162,700

Brielle Williamson

Integration Specialist

New York

61

02/12/2012

$372,000

Herrod Chandler

Sales Assistant

San Francisco

59

06/08/2012

$137,500

Rhona Davidson

Integration Specialist

Tokyo

55

14/10/2010

$327,900

Colleen Hurst

Javascript Developer

San Francisco

39

15/09/2009

$205,500

Sonya Frost

Software Engineer

Edinburgh

23

13/12/2008

$103,600

Jena Gaines

Office Manager

London

30

14/12/2023

$90,560

Quinn Flynn

Support Lead

Edinburgh

22

13/03/2022

$342,000

Charde Marshall

Regional Director

San Francisco

36

16/10/2008

$470,600

Haley Kennedy

Senior Marketing Designer

London

43

18/12/2012

$313,500

Tatyana Fitzpatrick

Regional Director

London

19

17/03/2010

$385,750

Michael Silva

Marketing Designer

London

66

27/11/2025

$198,500

Paul Byrd

Chief Financial Officer (CFO)

New York

64

08/06/2007

$725,000

Gloria Little

Systems Administrator

New York

59

19/04/2016

$237,500

Bradley Greer

Software Engineer

London

41

13/10/2019

$132,000

Dai Rios

Personnel Lead

Edinburgh

35

26/09/2020

$217,500

Jenette Caldwell

Development Lead

New York

30

21/09/2018

$345,000

Yuri Berry

Chief Marketing Officer (CMO)

New York

40

25/06/2009

$675,000

Caesar Vance

Pre-Sales Support

New York

21

12/12/2009

$106,450

Doris Wilder

Sales Assistant

Sidney

23

20/09/2015

$85,600

Angelica Ramos

CEO

London

47

09/10/2015

$1,200,000

Gavin Joyce

Developer

Edinburgh

42

22/12/2010

$92,575

Jennifer Chang

Regional Director

Singapore

28

14/11/2014

$357,650

Brenden Wagner

Software Engineer

San Francisco

28

07/06/2018

$206,850

Fiona Green

Chief Operating Officer (COO)

San Francisco

48

11/03/2016

$850,000

Shou Itou

Regional Marketing

Tokyo

20

14/08/2014

$163,000

Michelle House

Integration Specialist

Sidney

37

02/06/2014

$95,400

Suki Burks

Developer

London

53

22/10/2019

$114,500

Prescott Bartlett

Technical Author

London

27

07/05/2018

$145,000

Gavin Cortez

Team Leader

San Francisco

22

26/10/2021

$235,500

Martena Mccray

Post-Sales support

Edinburgh

46

06/03/2019

$324,050

Unity Butler

Marketing Designer

San Francisco

47

09/12/2009

$85,675

Howard Hatfield

Office Manager

San Francisco

51

16/12/2016

$164,500

Hope Fuentes

Secretary

San Francisco

41

12/02/2015

$109,850

Vivian Harrell

Financial Controller

San Francisco

62

14/02/2014

$452,500

Timothy Mooney

Office Manager

London

37

11/12/2010

$136,200

Jackson Bradshaw

Director

New York

65

26/09/2020

$645,750

Olivia Liang

Support Engineer

Singapore

64

03/02/2011

$234,500

Bruno Nash

Software Engineer

London

38

26/05/2019

$163,500

Sakura Yamamoto

Support Engineer

Tokyo

37

21/08/2019

$139,575

Thor Walton

Developer

New York

61

13/08/2015

$98,540

Finn Camacho

Support Engineer

San Francisco

47

07/07/2007

$87,500

Serge Baldwin

Data Coordinator

Singapore

64

09/04/2015

$138,575

Zenaida Frank

Software Engineer

New York

63

20/01/2018

$125,250

Zorita Serrano

Software Engineer

San Francisco

56

01/06/2006

$115,000

Jennifer Acosta

Junior Javascript Developer

Edinburgh

43

15/02/2015

$75,650

Cara Stevens

Sales Assistant

New York

46

08/12/2018

$145,600

Hermione Butler

Regional Director

London

47

24/03/2021

$356,250

Lael Greer

Systems Administrator

London

21

27/02/2019

$103,500

Jonas Alexander

Developer

San Francisco

30

14/07/2018

$86,500

Shad Decker

Regional Director

Edinburgh

51

15/11/2018

$183,000

Michael Bruce

Javascript Developer

Singapore

29

27/06/2015

$183,000

Donna Snider

Customer Support

New York

27

25/01/2020

$112,000

Name | Position | Office | Age | Start date | Salary | Action