Datatables

Zero configuration

DataTables has most features enabled by default, so all you need to do to use it with your own ables is to call the construction function: $().DataTable();.

Feature enable / disable

Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. The full list of available options is available in the DataTables reference.

Default ordering (sorting)

With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the order initialisation parameter, you can set the table to display the data in exactly the order that you want.

Multi-column ordering

DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways

Hidden columns

DataTables allows ordering by multiple columns at the same time, which can be activated in a number of

There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want to reduce the amount of data shown on screen to make it clearer for the user (consider also using the Responsive extension for this). This is done through the columns.visible column option.

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 androwspan in the table's header, assigning the required order listeners to the TH element suitable for that column.

DOM positioning

When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides thedom initialisation parameter which can be set to indicate where you wish particular features to appear in the DOM. You can also specify div wrapping containers (with an id and / or class) to provide complete layout flexibility.

Alternative pagination

The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the pagingType option.

Scroll - vertical

This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!).

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.

Scroll - horizontal

DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited horizontal display area. To enable x-scrolling simply set thescrollX parameter to be whatever you want the container wrapper's width to be (this should be 100% in almost all cases with the width being constrained by the container element).

Scroll - horizontal and vertical

In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and the scrolling accounts for this.

Language - Comma decimal place

A dot (.) is used to mark the decimal place in Javascript, however, many parts of the world use a comma (,) and other characters such as the Unicode decimal separator (⎖) or a dash (-) are often used to show the decimal place in a displayed number.

Language options

Changing the language information displayed by DataTables is as simple as passing in a language object to the DataTable constructor. This example shows a different set of English string being used, rather than the defaults.