Integrating the DataTables JavaScript Library

We continue our study of FileMaker & JavaScript.

There’s absolutely nothing wrong with a list view layout in FileMaker. It presents all the data in an organized and useful method so that users can quickly scroll through and find any record.

List views in FileMaker, however, are built from scratch; every layout element, every data field, and every functionality must be built. If a client’s use case calls for column headers that sort or a type-ahead filter search box, a FileMaker developer has to build those functions.

Enter DataTables. The DataTables JavaScript library is a complete package that presents data in a list. Out of the box it comes with both of the above-mentioned use cases as well as a whole lot more. If you need a lot of functionality in your list view, DataTables in JavaScript is the way to go.

So here are the steps to set up a DataTables list. In the following examples, we will use the JSPlayground file from FileMakerDevCon 2019‘s training day as a place to set up what we need. Then we’ll explore extracting it from the playground file and placing it into your custom app.

Let’s begin.