dom

Define the table control elements to appear on the page and in what order.

Description

DataTables will add a number of elements around the table to both control the table and show additional information about it. The position of these elements on screen are controlled by a combination of their order in the document (DOM) and the CSS applied to the elements. This parameter is used to control their ordering and additional mark-up surrounding them in the DOM.

Each table control element in DataTables has a single letter associated with it, and that letter it used in this dom configuration option to indicate where that element will appear in the document order.

Options

The built-in table control elements in DataTables are:

• l - length changing input control
• f - filtering input
• t - The table!
• i - Table information summary
• p - pagination control
• r - processing display element

Each option can be specified multiple times (with the exception of the table itself), which can be used to have table controls both above and below the table. DataTables will automatically synchronise these multiple controls.

Markup

Further to these options, you can also specify additional div elements to be inserted into the document, which can be used for styling / nesting of the control elements. To add tags, the following syntax is expected:

• < and > - div element
• <"class" and > - div with a class
• <"#id" and > - div with an ID
• <"#id.class" and > - div with an ID and a class

Styling

The styling libraries that DataTables supports will override the default value of the dom parameter and replace it with a value that is suitable for their layout system. For example the Bootstrap integration makes use of Bootstrap's grid layout.

Plug-ins

DataTables feature plug-ins can be developed to add additional features to DataTables and often will make use of this option, adding new letters to the DataTables core features. For example Buttons adds the B option to dom to specify where table control buttons should be inserted into the table.

The following extensions can be initialised through the dom option:

• B - Buttons
• R - ColReorder
• S - Scroller
• P - SearchPanes
• Q - SearchBuilder

Type

This option can be given in the following type(s):

• string

Default

• Value: null

The default value was lfrtip in DataTables 1.x. Styling integrations would set a custom value. As of DataTables 2, with this layout option replacing this one, its default value is null.

Examples

/* Results in:
    {length}
    {processing}
    {table}
    {information}
    {pagination}
*/
new DataTable('#myTable', {
	dom: 'lrtip'
});

// As of DataTables 2, use `layout`:

new DataTable('#myTable', {
  layout: {
    topEnd: null
  }
});

/* Results in:
    <div class="wrapper">
      {filter}
      {length}
      {information}
      {pagination}
      {table}
    </div>
*/
new DataTable('#myTable', {
	dom: '<"wrapper"flipt>'
});

/* Results in:
    <div>
      {length}
      {filter}
      <div>
        {table}
      </div>
      {information}
      {pagination}
    </div>
*/
new DataTable('#myTable', {
	dom: '<lf<t>ip>'
});

/* Results in:
    <div class="top">
      {information}
    </div>
    {processing}
    {table}
    <div class="bottom">
      {filter}
      {length}
      {pagination}
    </div>
    <div class="clear"></div>
*/
new DataTable('#myTable', {
	dom: '<"top"i>rt<"bottom"flp><"clear">'
});

Related

The following options are directly related and may also be useful in your application development.