JavaScript for FileMaker: DataTables

[av_one_half first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-3a7w0s85′]

[av_textblock size=’24’ font_color=’custom’ color=’#ffffff’ av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
DataTables is a JavaScript library that takes your data and turns it into a table in a web viewer. The built-in features provide a lot of functionality out of the box, and the library can handle thousands of records.

The DataTables library has been tested by thousands of users and is used many places throughout the web. It is a reliable library.
[/av_textblock]

[/av_one_half][av_one_half min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-34gjtd45′]

[av_image src=’https://www.geistinteractive.com/wp-content/uploads/2019/11/2019-11-25_06-42-46-1030×679.png’ attachment=’363254′ attachment_size=’large’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ copyright=” animation=’no-animation’ av_uid=’av-k3ed4gv4′ custom_class=” admin_preview_bg=”][/av_image]

[/av_one_half][/av_section][av_section min_height=” min_height_px=’500px’ padding=’small’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#314144′ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edhm34′ custom_class=”][/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=’scroll’ bottom_border_style=’scroll’ margin=” custom_margin=’0px’ scroll_down=” custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ video_mobile_disabled=” overlay_enable=” overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av_element_hidden_in_editor=’0′ av_uid=’av-2zlpipph’]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-2xnaezvp’]

[av_heading heading=’Does this work for FileMaker?’ tag=’h2′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-gyku2xx’][/av_heading]

[/av_one_full][av_one_half first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-2ribmeat’]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
This library is extremely useful in FileMaker. The plethora of options and the built-in features give you complete control over the data presentation without extra scripting. Additionally, since the data is loaded into the library, there’s no slowness when it comes to scrolling through records. All data is static.

The methods (interactions that work with your FileMaker custom app and data) cover all the possible cases we’d need to build for our clients.
[/av_textblock]

[av_button_big label=’DataTables Examples’ description_pos=’below’ link=’manually,https://datatables.net/examples/index’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[av_textblock size=’18’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
There are many possible uses for this library:

As a list view.
As a portal, showing related records.
To show virtual list records
As a value list picker

[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’small’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#314144′ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edhm34′ custom_class=”][/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#eef4f6′ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edbgwj’ custom_class=”]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-2jmgmb51′]

[av_heading heading=’Features’ tag=’h2′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-jmnd411′][/av_heading]

[av_heading heading=’Options’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=” custom_font=” custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-h6f1jol’][/av_heading]

Style the table according to styling frameworks (such as Bootstrap), or make your individual changes.
Display paging
Type-ahead filtering
- This can apply to the entire table
- Or it can be for only specific columns
Column Sorting
- Apply this to all columns
- Apply this to specific columns
Freeze a column or a row (as in a header row)
Create Subsummary rows* (this is probably the most JS-intensive operation)
Hide or show columns
Set a default sort
Always keep one column sorted
Change the number of records showing per page

[/av_textblock]

[av_button_big label=’Full list of Options’ description_pos=’below’ link=’manually,https://datatables.net/reference/option/’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[av_heading heading=’Interacting with FileMaker’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=” custom_font=” custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-bs10j8l’][/av_heading]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
DataTables will allow you to interact with your FileMaker custom app and data. You can even use FileMaker scripts to interact with the DataTables table. Here’s a partial use case list:

Click on a row and open up that record in a FileMaker layout
Use a FileMaker script to add records to the table
Use a FileMaker script to sort records or change any other options

[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=’scroll’ bottom_border_style=’scroll’ margin=” custom_margin=’0px’ scroll_down=” custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ video_mobile_disabled=” overlay_enable=” overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av_element_hidden_in_editor=’0′ av_uid=’av-1w21bu79′]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-1p7o1ffp’]

[av_heading heading=’How to Set it Up’ tag=’h2′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-d8qh06d’][/av_heading]

[/av_one_full][av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-1jxifdut’]

[av_heading heading=’‘Installing’ in Your App’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-8bqs04l’][/av_heading]

The FileMaker file attached here has a few fields and a web viewer. The fields, Code_HTML, Code_Data, Code_JS, and Code_FMScript, contain data relevant to the library. The HTML_Calc field substitutes out some placeholder text. The web viewer renders what’s in the HTML_Calc field.

By the way: This field-to-web viewer rendering method is completely legitimate. There’s a lot of good reasons for this method. There are other ways to work with code, but for now, stick with this method.

Here are the steps:

Simply import the one record from the DataTablesStart.fmp12 file into a new table in your custom app.
Set up the HTML_Calc field in your file to be the same as in the DataTablesStart file.
Create a layout similar to the example file’s layout (or copy/paste the objects from the Start file do your own).
Make sure that the web viewer’s calculation dialog is set to read the HTML_Calc field.
That’s it. You should see a DataTable set up with sample data.

For this library, I’d recommend using this method for now. We will explore other ways later.
[/av_textblock]

[av_button_big label=’Get the File’ description_pos=’below’ link=’download,363257′ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’small’ shadow=’shadow’ bottom_border=’border-extra-arrow-down’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#8dbbc5′ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edhm34′ custom_class=”][/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=’scroll’ bottom_border_style=’scroll’ margin=” custom_margin=’0px’ scroll_down=” custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ video_mobile_disabled=” overlay_enable=” overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av_element_hidden_in_editor=’0′ av_uid=’av-1buscen9′]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-19ezi411′]

[av_heading heading=’The Data’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” margin_sync=’true’ padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3fpugo0′ custom_class=” admin_preview_bg=”][/av_heading]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

This is what the data looks like for this example. It is an OBJECT that holds values of one record that will be displayed in the table. (Any of these properties can be displayed. We’ll discuss how to update the table to show more columns).

Multiple records are gathered in an array. See this video to learn how the data was collected.

Once the records are collected as an array of objects, the array is placed into a field: “Code__Data” and is then calculated into the JavaScript inside the web viewer.
[/av_textblock]

[av_button_big label=’More Info About the Data’ description_pos=’below’ link=’manually,https://datatables.net/manual/data/’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3fpeed7′ custom_class=” admin_preview_bg=”]

{
        "Address": "2434 East 6th Avenue",
        "Area": "",
        "City": "Denver",
        "Country": "United States",
        "Division": "South",
        "Email": "jlbmagic@gmail.com",
        "FirstName": "doug",
        "ID": 17,
        "ID_Company": "1",
        "LastName": "Henning",
        "Phone": "(234) 993-0909",
        "Sales": 952,
        "State": "CO",
        "Title": "CEO",
        "Zip": "80206"
    }

[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=’scroll’ bottom_border_style=’scroll’ margin=” custom_margin=’0px’ scroll_down=” custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ video_mobile_disabled=” overlay_enable=” overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av_element_hidden_in_editor=’0′ av_uid=’av-u62fsit’]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-op4q0x1′]

[av_heading heading=’The Callback to FileMaker’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-ogrvxh’][/av_heading]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

The JavaScript Function

var table = $('#myTable').DataTable();
    table.on('click', 'tr', function () {
        var data = table.row( this ).data();
        var id = {id: data.ID};
        var obj = JSON.stringify(id);
        console.log(obj);
        var theURL = "fmp://$/__FileName__?script=__Script__" + obj;
window.location = theURL;
});

[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

It uses the fmp URL, which means, currently, this will NOT work in WebDirect (though we know that is set to change in the next version of FileMaker).

[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

Quick Explanation

[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

Start Here:

var table = $('#myTable').DataTable();

The first line of this JavaScript finds the div element inside the web viewer that holds the table. It is found in a div with an id of “myTable”. It assigns this table to a variable “table”.

table.on('click', 'tr', function () {

This is the beginning of the function. It says “when someone clicks on a row (“tr”) of the table, run this function.

 var data = table.row( this ).data();
        var id = {id: data.ID};
        var obj = JSON.stringify(id);

Here we are assigning variables with data. First we get the data out of the row. Then we assign a variable “id” to a JavaScript object with the property “id” and the .ID part of the row (that comes from the JSON object above). Finally we stringify the object: we turn it into a JSON object.
[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

Continue…

  var theURL = "fmp://$/__FileName__?script=__Script__" + obj;
window.location = theURL;

This code simply invokes the fmpUrl. It sends the obj variable back to FileMaker.

Notice the placeholder text in here:

__FileName__

and

__Script__

These are replaced with the current file name and a script name in the “Code_FMScript” field.

If you’re having trouble getting this to work, refer to this blog post from LuminFire.

If you’re using FileMaker Pro 18 Advanced, you can update the ‘fmp://’ part of the function to “fmp18://”.
[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#ffffff’ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edfsn5′ custom_class=”]
[av_heading heading=’Updating the Options’ tag=’h2′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” margin_sync=’true’ padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3g6prfi’ custom_class=” admin_preview_bg=”][/av_heading]

Look through the documentation to find exact details about each option.

[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
To update the columns that are visible in the table, focus on the “columns” property. Create one JSON object in an array for each column you wish to show.
[/av_textblock]

[av_button_big label=’All the Options’ description_pos=’below’ link=’manually,https://datatables.net/reference/option/’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

    $('#myTable').DataTable({
//options here
            data: __Data__,
            order: [ [3,'asc' ], [2, 'asc'] ],
             fixedHeader: true,
            orderFixed: [3,'asc'],
            pagingType:'full_numbers',
            searching: true,
            pageLength: 15,
            lengthMenu: [[10, 30, 50, 60, 75, 100, -1], [10, 30,50, 60,75, 100, 'All']],
            columns: [
                {
                    data: 'ID',
                    title: 'ID',
                    visible:false
                },
                {data: 'FirstName', title: 'First'},
                {data: 'LastName', title: 'Last'},
                {data: 'Title', title: 'Position'},
                {
                    data: 'City',
                    title: 'City'
                },
                {
                    data: 'State',
                    title: 'State'
                },
                {
                    data: 'Country',
                   title: 'Country'
                }
                ]

        });

[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#eef4f6′ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edfsn5′ custom_class=”]
[av_heading heading=’Other Thoughts’ tag=’h2′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” margin_sync=’true’ padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3ecik0t’ custom_class=” admin_preview_bg=”][/av_heading]

[av_button_big label=’DataTables Posts’ description_pos=’below’ link=’manually,https://www.geistinteractive.com/?s=datatables’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

Add more data
Remove rows
Change the column order
Change the sort order
Group rows

and much more.

In our FileMaker DevCon 2019 Training session, we explored this. Review this page to help you see more we can do.
[/av_textblock]

[av_button_big label=’Using the DataTables API’ description_pos=’below’ link=’manually,https://www.geistinteractive.com/fm-js-datatables-and-fm-webviewer-bridge/’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[/av_one_half]
[/av_section]

JavaScript for FileMaker: DataTables

The JavaScript Function

Quick Explanation

Start Here:

Continue…

RECEIVE THE OCCASIONAL UPDATE

NEW PROJECT OR COLLABORATION?

FOLLOW US