Skip to main content

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.

ID Date Name Services
7807 1 Nov 2021 Terry Jones Form building
7806 1 Nov 2021 Chris Web design
7805 1 Nov 2021 Terry Form building
7804 1 Nov 2021 Terry Form building
7803 1 Nov 2021 Chris Adam Web design, Branding
5129 8 Sep 2020 terry vegetables Web design
5006 27 Aug 2020 Wally Walden Form building, Graphic design
5005 27 Aug 2020 Michael Moses Web design, Form building
5004 27 Aug 2020 Gary Goblin Branding, Software
5003 27 Aug 2020 Chris Adams Web design, Software
5002 27 Aug 2020 Steve Smith Web design, Form building, Software, Other
5001 27 Aug 2020 Minesh Kothari Web design, Branding
5000 27 Aug 2020 Chris Web design
4999 27 Aug 2020 Minesh Kothari Web design, Branding
4998 27 Aug 2020 Minesh Kothari Web design, Branding
4997 27 Aug 2020 Terry Test Form building
4996 27 Aug 2020 Steve Smith Web design
4995 27 Aug 2020 Terry Test Form building
3370 28 Feb 2020 Terry Test Form building
3369 28 Feb 2020 Steve Smith Web design
3368 28 Feb 2020 Chris Web design
3367 28 Feb 2020 Minesh Kothari Web design, Branding
3366 28 Feb 2020 Chris Web design
3365 28 Feb 2020 Terry Test Form building
3364 28 Feb 2020 Chris Web design
3363 28 Feb 2020 Steve Smith Web design
3351 26 Feb 2020 Terry Test Form building
3350 26 Feb 2020 Steve Smith Web design
2304 15 Apr 2019 Minesh Kothari Web design, Branding
2289 10 Apr 2019 Chris Web design
2284 8 Apr 2019 Chris Web design, Branding

This post has been viewed 2126 times.

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.

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

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:

<script>
   jQuery(document).ready( function () {
       jQuery('#simpleTable').DataTable();
   } );
</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.