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 domDT initialisation parameter which can be set to indicate where you which 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 domDT 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:

1
<"wrapper"flipt>

This results in the following DOM structure:

1
2
3
4
5
6
7
<div class="wrapper">
    { filter }
    { length }
    { info }
    { paging }
    { table }
</div>

Example 2:

1
<lf<t>ip>

This results in the following DOM structure:

1
2
3
4
5
6
7
8
9
<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 domDT 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.

Showing 1 to 10 of 57 entries
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060

The Javascript shown below is used to initialise the table shown in this example:

1
2
3
4
5
$(document).ready(function() {
    $('#example').dataTable( {
        "dom": '<"top"i>rt<"bottom"flp><"clear">'
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example: