DataTables example Base style

The DataTables default style file has a number of features which can be enabled based on the class name of the table. These features are:

  • cell-border - Cells with a border
  • compact - Increase the data density by reducing the cell padding
  • hover - Highlight a row when hovered over
  • order-column - Highlight the cells in the column currently being ordering upon
  • row-border - Rows with a border
  • stripe - Zebra striped rows

These classes can be combined (simply assign multiple classes to the table) to build up the styling that you want for your table. For more information on the options in the DataTables stylesheet, please refer to the DataTables styling manual

The display class is a short-cut for specifying the stripe hover order-column row-border as the class name for a table. This is shown in the example below.

NamePositionOfficeAgeStart dateSalary
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
Showing 1 to 10 of 57 entries

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

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

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