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.
First, download the DataTables library from the following link:
I recommend keeping the default options. On Step 3, select the Download tab, then click "Download files."
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:
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.
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.
If you would like to use the ID method, please follow these steps:
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>
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!