Formidable Forms & jQuery DataTables

Formidable Forms: jQuery DataTables

Formidable Forms Pro makes it extremely easy to create HTML tables of your form data using Views. But what if you need your tables to more interactive? Sorting, responsive sizing, search and filtering; these are all examples of really useful features to have in your html tables that jQuery DataTables can add with a couple of very simple scripts.

Here is an example of a HTML table with the basic DataTables configuration applied.

Getting Started:

For this tutorial you will need the following things:

1. A form to capture your data
2. A view to display your data
3. The DataTables scripts

If you haven’t done so already go ahead and create your form that will capture your data. Once your form has been created it’s a good idea to add some test entries to it for building your view and testing that everything works correctly. You can delete these entries later once everything is set-up.

Once your form has been created you then need to build your view. You can follow this guide on the FF KB that expains how to create a HTML table with a view.

TIP: DataTables requires a defined <thead></thead> section in your table and also a unique ID to be added to the <table> element. Make sure you add these at the start when building your table.

Adding DataTables

To apply DataTables to your html table is very simple. First you need to load 2 scripts into your page. You can add these 2 scripts directly into your view if you only want to load DataTables on one table or if you want to apply it to multiple tables and pages you can load the scripts in your page header.

To add these scripts directly to the view you can put them in either the ‘Before Content‘ or ‘After Content‘ section.

You then need to call the DataTables script & styling and apply it to your table. This is done with a very simple jQuery script:

Add this script to the ‘After Content‘ section of your view under the closing </table> tag and change #simpleTable to your table ID.

And thats it!

Your table will now be loaded using the default DataTables configuration and features which include:

• Search
• Pagination
• Sortable Columns
• Adjust the number of rows

Customise DataTables

Once you have the basic configuration working you can then start to customise DataTables with features that you need. To help you do this they have extensive documentation and examples that you can use to get started. Below we have some basic examples to get you started.

Disable Paging, ordering and info:

Turn off any of the default DataTables features.

<script>
   jQuery(document).ready(function() {
       jQuery('#simpleTable').DataTable( {
           "paging":   false,
           "ordering": false,
           "info":     false
       } );
   } );
</script>

Default ordering:

Define which column should be used as the default ordering column. DataTables counts the first column of your table as column 0 so make sure you take this into account when counting your table columns.

<script>
   jQuery(document).ready(function() {
       jQuery('#simpleTable').DataTable( {
           "order": [[ 3, "desc" ]]
       } );
   } );
</script>

State Saving

DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads a page, or comes back to the page after visiting a sub-page.

<script>
   jQuery(document).ready(function() {
       jQuery('#simpleTable').DataTable( {
           stateSave: true
       } );
   } );
</script>

Responsive Tables

DataTables also comes with various extensions that let you further enhance what the software is capable of. One of those is the responsive extension that makes your tables fully responsive for different screen sizes and devices.

To enable the responsive extension you need to include an extra script and stylesheet from the DataTables library:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.min.js"></script>

And then include the responsive option in the initialisation script:

<script>
   jQuery(document).ready(function() {
       jQuery('#simpleTable').DataTable( {
           responsive: true
       } );
   } );
</script>

Alternate Method

DataTables can also generate a HTML table for you using data provided using other methods including JavaScript, AJAX and server side processing. You can also utilise views to help generate the javascript and save yourself some time.

The table below uses a JS script (generated using a view) to pass the data to DataTables.

To try this method you can create a view that will contain your script and generate a new line of data for each entry in your form like the example below:

View Before Content:

<table id="example" class="display" width="100%"></table>
<script type="text/javascript">
var dataSet = [

View Content:

[ "[id]", "[816]", "[818]", "[995]" ],

View After Content:

];
jQuery(document).ready(function() {
  jQuery('#example').DataTable( {
    data: dataSet,
      columns: [
        { title: "ID" },
        { title: "Name" },
        { title: "Email" },
        { title: "Services." }
      ]
    } );
} );
</script>

Summary

You can view a full list of all of the DataTables scripts and stylesheets or you can build and download your own custom set so you only have to load in a single JS and CSS file for your site.

From here you can install and customise DataTables using the extensive documentation as much as you need and provide your users with a much better user interface and experience.

Enjoy.