Welcome to the multi-part video series that will teach you how to implement DataTables in your Claris FileMaker Pro solutions effectively. Whether you prefer reading, watching videos, or trying out demo files, we’ve got you covered. 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 delved into the DOM Element of pagination, learned how to control its visibility, placement, and styling, and uncovered the tools at your disposal to create a seamless and intuitive data navigation system.
In this post, we will expand our knowledge of navigation settings. We will focus on the features and functionalities related to Page Length Options. Our efforts will concentrate on controlling how many records are displayed on each page, managing the visibility of control options, and customizing dropdown values for record display.
Controlling Page Length Appearance
As we learned in the prior two posts, there are two main approaches to controlling the appearance of an element in your report. Like the search and pagination features, we can toggle the Page Length control on or off, affecting its presence when previewing the build. This setting controls the end user’s ability to change the paging display length of the table.
Option 1: Modify the DOM Elements
We can control if the length control appears on the report by modifying the values we set for DOM elements.
The default DOM arrangement is constructed like this:
lfrtip
If we want to prevent the user from being able to modify the lengthChange on a report, we can remove the ‘l’ (pagination) like this:
frtip
Option 2: Control the JS Function’s settings
We can also disable length control for specific reports. Even if the DOM element has length enabled (example: lfrtip), we can toggle the lengthChange feature on or off in each individual report’s settings.
The syntax that appears in the DataTables settings would appear like this:
lengthChange: true
or
lengthChange: false
Page Length Options – Key Controls
In addition to managing the location and visibility of the Page Length, we can control how the user interacts with the report. Let’s look at the other key controls we can set in the DataTables Builder to modify our reports.
Length Menu Control:
Defines the values available in the dropdown list for selecting page lengths.
Page Length Default Control:
Sets the default number of records displayed when landing on a page.
Controls in the DataTables Builder
The DataTables Builder makes it easy for the developer to create a custom dropdown value list to meet the needs of the report. By default, the Length Menu Control template contains the values of ‘10, 20, 50, 100 and All’ in the dropdown list.
In addition to the Length Menu Control, the DataTables Builder also allows you to select the
the default page length when the report loads. This setting is based on the Page Length Menu control options. The beauty of this feature is that every report you create can have different values in the dropdown list and the default page quantity.
Be on the Lookout
I mentioned earlier that the two DOM Elements, pagination and length, are similar and have some relationship with each other. A key concept to understand here is that if pagination is turned off, the page length control is automatically hidden, and all page length controls are ignored as they are no longer relevant.
On the flip side, it is important to understand that we can disable the length change option from appearing on the report, but still set the default page length behind the scenes. For example, if we set the Page Length on Load to a value of 10, but do not show the user an option to change this, they will only be able to see 10 records at a time and will need to navigate the report use the pagination options.
Demo File
The demo file (see bottom of blog post to download) and the associated video tutorial feature on how to use the DataTables Builder to modify and view the various settings we discussed above.
I demonstrate the impact of turning off the length change and explain how dropdown values are controlled. There are considerations to keep in mind when you build reports for your users.
What is the interaction between pagination, page length, and user experience? You may need to customize a report based on use cases, such as deciding whether to show the page length control for reports with static data or limiting the number of records based on space limitations.
What’s next?
In the final post of this series on JS Functions, we will look at some additional settings we can control to fine-tune our report. We will also show an example of adding an extension and learning how to manually change settings that are not included in the DataTables Builder.
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.
Built with you in mind
Speak to one of our expert consultants about making sense of your data today. During
this free consultation, we'll address your questions, learn more about your business, and
make some immediate recommendations.
