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.

Walkthrough

Below are the steps we’ll walk through to set up the DataTables integration. Either follow them in sequence or choose an option you need to set up in your chart.

Getting the File

You can download the file with the button below. It contains the DataTables integration set up and the steps we’ll follow in the videos below.

Download the File

Steps 1-3

Steps 4-6

Steps 7-9

Steps 10-12

Steps 13-15

Steps 16-19

More Thoughts

Behind the Scenes: The Setup

Thinking about the Data

And check out the “General Videos” section where we explain more general integration steps (ones not describing the DataTables library).

Steps 1-3

(Click to Play)

Jeremy begins this integration by simply initializing the table and making it ready to accept data. (The table isn’t yet drawn, but it will be)

(Click to Play)

Now that the table has been initialized, we need to tell DataTables the records we want it to show. Jeremy leads us through this simple step.

(Click to Play)

Finally we’re able to add columns to the table. As we do so, they ‘magically’ appear in the web viewer. Follow along as Jeremy shows you how to add any number of columns to the table.

Steps 4-6

(Click to Play)

Column headers are added to the table next. Again, it’s a simple option setting.

(Click to Play)

Here Jeremy discusses and shows you how to style the table. It’s easy. The table is using the Bootstrap library, and that has a bunch of formatting already built in.

(Click to Play)

DataTables provides a lot of ‘out-of-the-box’ functionality. Jeremy takes a moment to review that which is already built.

Steps 7-9

(Click to Play)

Before diving into individual options, Jeremy shows all the the possibilities that DataTables gives us. There’s quite a lot!

(Click to Play)

In this video, Jeremy explains the option for disabling the type-ahead filter/search functionality that is on by default.

(Click to Play)

Rather than turning off searching for every column, you can choose to do so for one or more columns. Jeremy shows you how.

Steps 10-12

(Click to Play)

We can hide any column from the main view. The hidden data remains part of the row, but it is not visible.

(Click to Play)

One of the default options, the “Length Menu” which allows a user to change the number of records per page, can be adjusted to anything.

(Click to Play)

It’s a normal use case to click on a row and show that record’s detail. We can do that by adding an onClick event to the row.

Steps 13-15

(Click to Play)

DataTables provides quite a few extensions: additional code that adds even more functionality. Jeremy shows you how to add a row group (a Subsummary row).

(Click to Play)

We can update the type of pagination options displayed at the bottom-right of the table. Watch as Jeremy shows you how.

(Click to Play)

We can change the default sort of the data table in the web viewer. Again, it’s pretty easy to do so.

Steps 16-18

(Click to Play)

There might be a call for you to prevent sorting by one of the columns. Watch this and see if it is something you’d use.

(Click to Play)

Sometimes you want to keep the table sorted by one or more columns. In this video, Jeremy shows you how.

(Click to Play)

Now that you’ve had a lot of practice with Datatables, try some options on your own.

Steps 19-21

(Click to Play)

In this ‘Being the Scenes’ video, Jeremy explains how he set up the code to render the table into the web viewer.

Integrating the DataTables JavaScript Library

Walkthrough

Getting the File

Steps 1-3

Steps 4-6

Steps 7-9

Steps 10-12

Steps 13-15

Steps 16-19

More Thoughts

Steps 1-3

Steps 4-6

Steps 7-9

Steps 10-12

Steps 13-15

Steps 16-18

Steps 19-21

General Videos

Continue Study

Contact Us