Using the DataTables Library with the FM WebViewer Bridge

We continue our study of FileMaker and JavaScript.

The DataTables library provides us with plenty of API method we can leverage to change the data inside the web viewer object. We can use the FM WebViewer Bridge to access the APIs and make the changes. We can change the order of the columns, add a row or many rows of data, clear the data, create a subsummary, and much more.

In these series of videos, we walk through a few of those API methods. We take it step-by-step to write the JavaScript function and the FileMaker script.

Let’s begin.

Walkthrough

Below are the steps we’ll walk through how to connect to the Bridge, write FileMaker scripts, and write JavaScript functions. Watch them in sequence to get the best experience and understanding..

Getting the File

You can download the file with the button below. It contains the DataTables & FM WebViewer Bridge exercise. Use this file to follow along with the videos below.

Download the File

Steps 1-3

Steps 6-7

Clear Data / Add Rows
Try it on Your Own

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-5

(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.

Steps 6-7

(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.

General Videos

We’ve got some tutorials that apply generally to the work you’ve done with the JSPlayground file and with JavaScript in general. They will be posted here. Check back soon!

FileMaker & JavaScript

Head back to the FileMaker & JavaScript page to continue your study.