{hero}

dom

Since: DataTables 1.10

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

Deprecated

As of v2.0 this feature has been deprecated. This feature will be removed from version 3.0 onwards

This option is superseded by the layout option in DataTables 2, which is far more flexible, intuitive and styling framework independent. Do not use this option for new projects, and actively update older projects to use layout rather than this option.

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:

Type

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

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

No filtering input control:

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

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

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

Simpler wrapper element:

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

Length and filter above, information and pagination below table:

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

Table summary in header, filtering, length and processing in footer, with a clearing element.:

/* 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.