DataTables example 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 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.

Each HTML control element presented by DataTables is denoted by a single character in the dom option. For example the l option is used for the Length changing input option.

The built-in options available are:

• l - Length changing
• f - Filtering input
• t - The Table!
• i - Information
• p - Pagination
• r - pRocessing
• < and > - div elements
• <"#id" and > - div with an id
• <"class" and > - div with a class
• <"#id.class" and > - div with an id and class

Example 1:

<"wrapper"flipt>

This results in the following DOM structure:

<div class="wrapper">
    { filter }
    { length }
    { info }
    { paging }
    { table }
</div>

Example 2:

<lf<t>ip>

This results in the following DOM structure:

<div>
    { length }
    { filter }
    <div>
        { table }
    </div>
    { info }
    { paging }
</div>

All options (with the exception of the t (table) option can be specified multiple times, for if you want to show the same control multiple times (pagination at the top and bottom of the table for example).

Furthermore, note that additional dom options can be added to DataTables through the use of plug-ins.

In the example below, the table information is moved to the top of the table, and all the interaction elements to the bottom, each wrapper in a container div.