The page controls which are used by default in DataTables (forward and backward buttons only) are great for most situations, but there are cases where you may wish to customise the controls presented to the end user. This is made simple by DataTables through its extensible pagination mechanism. There are two types of pagination controls built into DataTables: $.fn.dataTableExt.oPagination object.
The example below shows the
colspan and rowspans in the header, assigning the required sorting listeners to the TH element suitable for that column. Each column must have one TH cell (and only one) which is unique to it for the listeners to be added. The example shown below has the core browser information grouped together.
+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 div wrapping containers (with classes) to provide complete layout flexibility. The syntax available is:
In the example below I've moved the table information to the top of the table, and all the interaction elements to the bottom, each wrapper in a container div.
Often you may want to have your table resize dynamically with the page. Typically this is done by assigning width:100% in your CSS, but this presents a problem for Javascript since it can be very hard to get that relative size, rather than the absolute pixels. As such, if you apply the width attribute to the HTML table tag, this will be used as the width for the table (overruling any CSS styles).
This example shows a table width width="100%" and the container is also flexible width, so as the window is resized, the table will also resize dynamically.
As you would expect with a desktop application, DataTables allows you to sort by multiple columns at the same time. This multiple sorting mechanism is always active if the true (it is by default) and the end user can activate it by 'shift' clicking on the column they want to add to the sort. You can also pass in an array of information using the
DataTables also provides a method to add your own sorting functions, to extend those built into DataTables. This can be very useful if you wish to sort on data formats such as currency and non-Javascript standard date formats (this natural sort algorithm is a popular option). This is achieved by extending the jQuery.fn.dataTableExt object with ascending and descending sort functions. In the example below I've added case sensitive sorting functions.
This DataTables horizontal scrolling example shows horizontal scrolling on a DataTable, which is very useful for when you have a wide table, with a large number of columns to display, but want to constrain it to a limited horizontal display area. To enable x-scrolling simply set the
Also shown in this example is the use of a 'collapsing scroll table' by using
This example shows the DataTables table body scrolling in the vertical direction with infinite scrolling. The idea of infinite scrolling means that data will be added to the table dynamically, as and when needed by the user scrolling the table. A sub-set of the data is loaded initially, and more added as needed (technically of course, it is not "infinite" since it will stop loading data at the end of the data set!). Note that pagination much be enabled for infinite scrolling to work, but the pagination controls will not be shown (they could be, but can cause very confusing user interaction).
+ +DataTables' infinite scroll can be used with any of the four data sources supported, and they do not require any modification to work (including server-side scripts).
+