DataTables - Styling

This site contains the legacy documentation for DataTables v1.9 and earlier for reference only.
DataTables 1.9 was End Of Life in 2014. Do not use it for new work.
The current release of DataTables can always be found on DataTables.net.

Custom classes

In order to provide complete styling flexibility, DataTables provides methods to customise the classes which are used for the various elements created by DataTables. These are fully detailed below, indicating what the various uses for, but it can be just as instructive to have a peak at the live DOM of an example table using Firebug, Webkit's Inspector, IE's developer tools, or any of the other options.

Two different sets of default classes are provided in DataTables, and which one is used is selected by the initialisation parameter:

$.fn.dataTableExt.oStdClasses - used when bJQueryUI is false
$.fn.dataTableExt.oJUIClasses - used when bJQueryUI is true

Features

sWrapper Show details	Applied to the DIV element that DataTables wraps around all elements it creates (including the table itself)
Default (standard):	dataTables_wrapper
Default (jQuery UI):	dataTables_wrapper

sFilter Show details	Applied to the DIV element created for the filtering input
Default (standard):	dataTables_filter
Default (jQuery UI):	dataTables_filter

sInfo Show details	Applied to the DIV element created for the current display information
Default (standard):	dataTables_info
Default (jQuery UI):	dataTables_info

sPaging Show details	Applied to the DIV element created for the paging controls. Note that the name of the paging method used is postfixed to this class
Default (standard):	dataTables_paginate paging_
Default (jQuery UI):	dataTables_paginate fg-buttonset fg-buttonset-multi paging_

sLength Show details	Applied to the DIV element created for the display length changing control
Default (standard):	dataTables_length
Default (jQuery UI):	dataTables_length

sProcessing Show details	Applied to the DIV element created for the processing display
Default (standard):	dataTables_processing
Default (jQuery UI):	dataTables_processing

Two button pagination

sPagePrevEnabled Show details	Previous paging button enabled
Default (standard):	paginate_enabled_previous
Default (jQuery UI):	fg-button ui-state-default ui-corner-left

sPagePrevDisabled Show details	Previous paging button disabled
Default (standard):	paginate_disabled_previous
Default (jQuery UI):	fg-button ui-state-default ui-corner-left ui-state-disabled

sPageNextEnabled Show details	Next paging button enabled
Default (standard):	paginate_enabled_next
Default (jQuery UI):	fg-button ui-state-default ui-corner-right

sPageNextDisabled Show details	Next paging button disabled
Default (standard):	paginate_disabled_next
Default (jQuery UI):	fg-button ui-state-default ui-corner-right ui-state-disabled

sPageJUINext Show details	Icon to use for the "next" button. Used for jQuery UI themes only.
Default (standard):
Default (jQuery UI):	ui-icon ui-icon-circle-arrow-e

sPageJUIPrev Show details	Icon to use for the "previous" button. Used for jQuery UI themes only.
Default (standard):
Default (jQuery UI):	ui-icon ui-icon-circle-arrow-w

Full numbers pagination

sPageButton Show details	Generic class to give to the paging buttons
Default (standard):	paginate_button
Default (jQuery UI):	fg-button ui-state-default

sPageButtonActive Show details	Class to give the number in the list which represents the current page
Default (standard):	paginate_active
Default (jQuery UI):	fg-button ui-state-default ui-state-disabled

sPageButtonStaticDisabled Show details	Class to apply to the static buttons ('Next', 'Previous' etc) which would have no effect on the current page.
Default (standard):	paginate_button
Default (jQuery UI):	fg-button ui-state-default ui-state-disabled

sPageFirst Show details	Class to apply to the 'First' button
Default (standard):	first
Default (jQuery UI):	first ui-corner-tl ui-corner-bl

sPagePrevious Show details	Class to apply to the 'Previous' button
Default (standard):	previous
Default (jQuery UI):	previous

sPageNext Show details	Class to apply to the 'Next' button
Default (standard):	next
Default (jQuery UI):	next

sPageLast Show details	Class to apply to the 'Last' button
Default (standard):	last
Default (jQuery UI):	last ui-corner-tr ui-corner-br

Striping

sStripeOdd Show details	Default for odd rows
Default (standard):	odd
Default (jQuery UI):	odd

sStripeEven Show details	Default for even rows
Default (standard):	even
Default (jQuery UI):	even

Empty rows

sRowEmpty Show details	Applied to the TR element that DataTables will create to show 'No matching records' information
Default (standard):	dataTables_empty
Default (jQuery UI):	dataTables_empty

Sorting

sSortAsc Show details	Applied to the TH element which has sorting ascending applied to it. Note that when the jQuery UI theming option is enabled, an extra element (span) is added into the TH for icon display
Default (standard):	sorting_asc
Default (jQuery UI):	ui-state-default

sSortDesc Show details	Applied to the TH element which has sorting descending applied to it.
Default (standard):	sorting_desc
Default (jQuery UI):	ui-state-default

sSortable Show details	Applied to TH elements which are sortable (if they don't already have sorting asc or desc applied)
Default (standard):	sorting
Default (jQuery UI):	ui-state-default

sSortColumn Show details	Class applied to TD elements in column which is currently being sorted. Note that this class will have the number '1', '2' or '3' postfixed to it to indicate the priority of the sorting (multi-column sorting)
Default (standard):	sorting_
Default (jQuery UI):	sorting_

sSortJUIAsc Show details	Icon class for sorting ascending
Default (standard):
Default (jQuery UI):	css_right ui-icon ui-icon-triangle-1-n

sSortJUIDesc Show details	Icon class for sorting descending
Default (standard):
Default (jQuery UI):	css_right ui-icon ui-icon-triangle-1-s

sSortJUI Show details	Icon class for a sortable column which does not have sorting acs or desc applied
Default (standard):
Default (jQuery UI):	css_right ui-icon ui-icon-carat-2-n-s

sSortableAsc Show details	This class is applied to column headers which have sorting enabled, but only allow sorting in the ascending direction.
Default (standard):	sorting_asc_disabled
Default (jQuery UI):	ui-state-default

sSortableDesc Show details	This class is applied to column headers which have sorting enabled, but only allow sorting in the descending direction.
Default (standard):	sorting_desc_disabled
Default (jQuery UI):	ui-state-default

sSortJUIAscAllowed Show details	This class is applied to the icon element in column headers which have sorting enabled, and jQuery UI theming is enabled, but only allow sorting in the ascending direction.
Default (standard):
Default (jQuery UI):	css_right ui-icon ui-icon-carat-1-n

sSortJUIDescAllowed Show details	This class is applied to the icon element in column headers which have sorting enabled, and jQuery UI theming is enabled, but only allow sorting in the descending direction.
Default (standard):
Default (jQuery UI):	css_right ui-icon ui-icon-carat-1-s

sSortableNone Show details	Applied to TH elements which have sorting disabled on them (i.e. bSortable:false).
Default (standard):	sorting_disabled
Default (jQuery UI):	ui-state-default

DataTables designed and created by SpryMedia © 2008-2014
DataTables is dual licensed under the GPL v2 license or a BSD (3-point) license.