DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
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();.
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.
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.
DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways
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.
When using tables to display data, you will often wish to display column information in groups.
DataTables fully supports colspan and
rowspan in the table's header, assigning the required order listeners to the TH element
suitable for that column.
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 the
dom 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.
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.
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!).
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.
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 the
scrollX 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).
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.
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.
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.