Master DataTables Series: 2.1 DataTables Libraries

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 maximize your learning experience. You can access the complete series here: Master DataTables with Claris FileMaker Pro.

In the previous post, we discussed JavaScript functions and the inner workings of DataTables.  We also provided an overview of the topics in this series.

This post will examine DataTables’ Libraries and how they shape and enhance your reports. Libraries are essentially the power that drives DataTables; understanding this concept is essential as you continue to construct and enrich your reports over time.

Libraries Tab

In the DataTables Builder, a tab for Libraries is identified as part of the build process. In most situations, once a report is built, the library tab data does not change. For you to understand what libraries are required to run DataTables and how they affect your report, we are going back to the basics. You will see that the templates used in our first video series have been replaced. In this lesson, I will explain how to add libraries to your build and where to look for them.

DataTables Required Libraries

For DataTables to function, CSS and JavaScript libraries must be included. DataTables is a plug-in for the jQuery JavaScript library, so we also need to install this library. We need to choose a styling framework, or CSS, for the HTML table to display. JavaScript libraries are essential to run DataTables’ code, and which package we include depends on the chosen styling (CSS).

Optional Extensions

Extensions are features that enhance DataTables’ functionality. They require additional JavaScript code to be added to the required core libraries noted above. For example, to add a specific function, such as including a “fixed header” capability to keep column headers visible during scrolling, we need to add an extension to our library that powers this option.

Library References

So, where do we find these extensions and core libraries? We cover two options in the video series:
DataTables Download
DataTables CDN

It is important to select the appropriate libraries based on your project’s needs and styling preferences. We cover the different options, including the use of Content Delivery Networks (CDNs), to obtain the necessary resources.

Applying Libraries in the Builder

After deciding on the libraries and extensions you need from the website, we need to update the DataTables Builder. We do this in the Libraries’ tab, which is then referenced in our final HTML. We also need to understand how the DataTables Builder uses a library template for creating reports. If we want to update the default Library template being utilized, I show you how and where to make this change in the Builder.

Impact on Report Appearance

The role of libraries shapes the appearance and behavior of reports. By adding or removing specific libraries or extensions, we can affect the report’s visual elements, add features, and customize behavior. It’s important to understand which libraries are required as we add more functionality to each DataTables report.

What’s next?

In the next post, we examine DOM elements. These are the settings that drive the searching, pagination, and other important customizations your users will utilize when interacting with the reports you build.

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.