DataTables example - Base style - hover

This example shows DataTables with just the hover class specified. This class will instruct DataTables' styling to highlight a row when the mouse is hovered over it.

Name Position Office Age Start date Salary
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $3,120
Garrett Winters Director Edinburgh 63 2011/07/25 $5,300
Ashton Cox Technical Author San Francisco 66 2009/01/12 $4,800
Cedric Kelly Javascript Developer Edinburgh 22 2012/03/29 $3,600
Jenna Elliott Financial Controller Edinburgh 33 2008/11/28 $5,300
Brielle Williamson Integration Specialist New York 61 2012/12/02 $4,525
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $4,080
Rhona Davidson Integration Specialist Edinburgh 55 2010/10/14 $6,730
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $5,000
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $3,600
Jena Gaines System Architect London 30 2008/12/19 $5,000
Quinn Flynn Financial Controller Edinburgh 22 2013/03/03 $4,200
Charde Marshall Regional Director San Francisco 36 2008/10/16 $5,300
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $4,800
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $2,875
Michael Silva Senior Marketing Designer London 66 2012/11/27 $3,750
Paul Byrd Javascript Developer New York 64 2010/06/09 $5,000
Gloria Little Systems Administrator New York 59 2009/04/10 $3,120
Bradley Greer Software Engineer London 41 2012/10/13 $3,120
Dai Rios System Architect Edinburgh 35 2012/09/26 $4,200
Jenette Caldwell Financial Controller New York 30 2011/09/03 $4,965
Yuri Berry System Architect New York 40 2009/06/25 $3,600
Caesar Vance Technical Author New York 21 2011/12/12 $4,965
Doris Wilder Sales Assistant Edinburgh 23 2010/09/20 $4,965
Angelica Ramos System Architect London 36 2009/10/09 $2,875
Gavin Joyce Developer Edinburgh 42 2010/12/22 $4,525
Jennifer Chang Regional Director London 28 2010/11/14 $4,080
Brenden Wagner Software Engineer San Francisco 18 2011/06/07 $3,750
Ebony Grimes Software Engineer San Francisco 48 2010/03/11 $2,875
Russell Chavez Director Edinburgh 20 2011/08/14 $3,600
Michelle House Integration Specialist Edinburgh 37 2011/06/02 $3,750
Suki Burks Developer London 53 2009/10/22 $2,875
Prescott Bartlett Technical Author London 27 2011/05/07 $6,730
Gavin Cortez Technical Author San Francisco 22 2008/10/26 $6,730
Martena Mccray Integration Specialist Edinburgh 46 2011/03/09 $4,080
Unity Butler Senior Marketing Designer San Francisco 47 2009/12/09 $3,750
Howard Hatfield Financial Controller San Francisco 51 2008/12/16 $4,080
Hope Fuentes Financial Controller San Francisco 41 2010/02/12 $4,200
Vivian Harrell System Architect San Francisco 62 2009/02/14 $4,965
Timothy Mooney Financial Controller London 37 2008/12/11 $4,200
Jackson Bradshaw Director New York 65 2008/09/26 $5,000
Miriam Weiss Support Engineer Edinburgh 64 2011/02/03 $4,965
Bruno Nash Software Engineer London 38 2011/05/03 $4,200
Odessa Jackson Support Engineer Edinburgh 37 2009/08/19 $3,600
Thor Walton Developer New York 61 2013/08/11 $3,600
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $4,800
Elton Baldwin Data Coordinator Edinburgh 64 2012/04/09 $6,730
Zenaida Frank Software Engineer New York 63 2010/01/04 $4,800
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $5,300
Jennifer Acosta Javascript Developer Edinburgh 43 2013/02/01 $2,875
Cara Stevens Sales Assistant New York 46 2011/12/06 $4,800
Hermione Butler Director London 47 2011/03/21 $4,080
Lael Greer Systems Administrator London 21 2009/02/27 $3,120
Jonas Alexander Developer San Francisco 30 2010/07/14 $5,300
Shad Decker Regional Director Edinburgh 51 2008/11/13 $5,300
Michael Bruce Javascript Developer Edinburgh 29 2011/06/27 $4,080
Donna Snider System Architect New York 27 2011/01/25 $3,120

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() {
	$('#example').dataTable();
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:


The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.