How to Implement Table Sorting in your HTML5 Outputs

As a Sales Engineer, I interact with lots of customers. During demonstrations I have the opportunity to hear directly from users about which features they would like to see within Flare. A big request that I hear is the ability to sort tables in Flare generated HTML5 output. This piqued my interest, so I began looking into ways that users can implement sortable tables in their Flare projects. In my search, I found a free jQuery plug-in called DataTables that is fairly quick and easy to setup within Flare with just a few steps. DataTables allows you to sort tables, search within your tables with dynamic filtering, as well as paginate your tables in your HTML5 outputs.

 

Note:
The DataTables plug-in requires tables to have a header row (thead) for them to be sortable.

 

Preliminary Step:

First, download the DataTables library from the following link:

DataTables Download

 

I recommend keeping the default options. On Step 3, select the Download tab, then click "Download files."

 

 

Implementing the jQuery Plug-in

 

This will download a ZIP archive that contains all of the files required for DataTables. Once the ZIP archive has finished downloading, extract its contents to a folder on your machine. Then, open your Flare project and copy the files into your Resources folder:

 

  1. Copy the DataTables folder that you extracted.
  2. Open the Content Explorer of your Flare project
  3. Right-click the Resources folder and select Open Folder in Windows
  4. Paste the DataTables folder into the Resources folder

 

Once this is done, we will need to add a reference to the CSS file, as well as the JS file in the master page of the project. The following steps should be done for any master page that is applied to a topic which contains a table.

 

  1. Go to Resources > MasterPages. Open the master page and switch to the Text Editor.

  2. Inside the <head> tags, add a <link /> tag with the relative path to the jquery.dataTables.css file as the value of the src attribute, for example: 
    <link rel="stylesheet" type="text/css" href="../DataTables/DataTables-1.10.20/css/jquery.dataTables.css" />

  3. Just before the closing </body> tag, add the following <script> tag:
    <script type="text/javascript" charset="utf8" src="../DataTables/DataTables-1.10.20/js/jquery.dataTables.js"></script>

  4. Following the closing </script> tag, we will need to call a function. Add the following <script> tag:
    <script>
    $(document).ready( function () {
    $('#myTable').DataTable();
    } );
    </script>

 

 

Note:
This example of the function is calling an ID of "myTable". This allows you to select which tables you would like to sort in your output, and it allows you to use your custom Table Styles. However, there are a few different options. For instance, you could edit this script so that every table using a specific Table Style will be sortable, or so that every table in your output will be sortable.

 

ID Method

If you would like to use the ID method, please follow these steps: 

 

  1. Open your stylesheet
  2. Right-click the table element and select Add Selector
  3. In the Add Selector dialog, select Advanced Options
  4. Enter myTable into the Identifier (ID) field


  5. Open a topic with a table you would like to sort
  6. Right-click the table element from the structure bar and click Select > Table
  7. Select table#myTable from the Style drop-down on the Home Ribbon, or from the Styles Window



Table Style Method

If you would like to have all tables that are using a specific Table Style to be sortable, you can replace '#myTable' from the script with the name of your Table Stylesheet class. For example if your Table Stylesheet is named Basic.css, the script would be as follows: 

<script>
$(document).ready( function () {
$('.TableStyle-Basic').DataTable();
} );
</script>

 

 

Every Table Method

If you would like every table in your output to be sortable, please use the following script:

<script>
$(document).ready( function () {
$('table').DataTable();
} );
</script>

 

 

And there you have it! Build your HTML5 output, and you'll notice that you now have sortable tables! If you have used table sorting in creative ways to expand the functionality of your MadCap Flare output, let us know in the comments below!