DataTables logo DataTables

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:

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