Master DataTables Series: 2.2 DOM Elements

Welcome to the multi-part video series that will teach you how to implement DataTables in your Claris FileMaker Pro solutions effectively. If you’re new to this series, we recommend starting from the introduction to get the most out of your learning experience. You can access the complete series here: Master DataTables with Claris FileMaker Pro.

In the previous post, we reviewed Libraries, the power that drives DataTables, and how they shape and enhance your reports.

In this post, we examine DOM elements in the context of DataTables. These settings drive the searching, pagination, and other important customizations your users will utilize when interacting with the reports you build.

DOM Elements Overview

DOM elements are components of a report in DataTables and include pagination, filtering (search), table information summary, table outline, and processing display.

Each element is represented by a letter:
l (length)
f (filtering)
t (table)
i (information)
p (pagination)
r (processing display)

Default Controls

DataTables has default controls for arranging DOM elements. If you do not explicitly modify the
DOM elements when you create a report, the elements will be applied with this default arrangement:

lfrtip

( length, filtering, table, information, pagination )

Customizing DOM Elements in the Builder

However, we can modify this default arrangement by customizing the DOM structure.  We handle this in the DataTables Builder, under the tab, JS Function. The gear icon in the JS function allows us access to modify this setting.

I have chosen to modify the default DOM positioning within the DataTables Builder.  Instead of the default controls set by DataTables, I have coded the DataTables Builder to default the DOM elements with the following arrangement.

<fli> <t> <rp>

( filtering, length, and information above the table, processing and pagination below )

This does not mean that we cannot modify the DataTables Builder’s settings; it simply sets a default from which we can work from

Codes for each DOM element can be added or removed to modify the arrangement.  Hovering over the DOM field in the settings window displays a reminder of what each code represents.  Each code, except for ‘t’ (table), can also be displayed more than once. DOM elements are positioned using their respective letters in the order and location you want them to appear.

Examples of DOM Arrangements

lfrtip

( default arrangement )

lrtip

( search/filter removed )

lpftip

( display pagination above and below the table )

<”top”i>t<”bottom”flp>

( uses classes and div tags to style DOM elements ) Advanced*

Blrtip

( add button extension ) Advanced*

In future lessons, we will cover the Advanced* examples.  This includes adding CSS classes and div tags that can allow for further customization. We will also explore adding extensions and plugins (e.g., buttons) to the DOM.

Demo File

The demo file (see bottom of blog post to download) allows us to practice modifying the DOM elements. We will demonstrate the examples outlined above, using the gear icon in JS Functions tab to modify settings. By adding and removing DOM Element codes, we change the arrangement and can observe the effects on the Preview tab of the DataTables Builder.

What’s next?

Future lessons will explore these individual DOM elements in detail and how to customize and manipulate them even further.

In the next post, we cover searching or the ‘f’ (filtering) DOM element.

Join the Training Series Now

Subscribe to our YouTube channel to keep up with the video training series. Comment on the YouTube videos to interact with us and share your thoughts and questions. Also, don’t forget to join our mailing list for updates on new videos and additional resources.