Calculated Fields Form Blog

Displaying advanced tables of records

Introducing the DataTable DS component to display advanced tables of records.

The DataTable DS control, distributed with the Developer and Platinum versions of the plugin, allows you to generate data tables with pagination, search components, sort columns, and other advanced functionalities to display the records in the recordset.

The DataTable DS control loads records from Recordset DS fields.

So, the first step will be to insert and configure a RecordSet DS field. For this post, I have inserted the Recordset DS field fieldname1 in the form, configured to read a CSV file with the list of countries and their capitals.

More information about the RecordSet DS fields by reading the "Using the information stored in a database or csv file in the form" post.

Once the RecordSet DS field has been inserted and configured, it is time to insert the DataTable DS control to display the records:

DataTable DS controls include multiple attributes to configure their components and behavior, such as Multipage to split rows into individual pages, Ordering to sort rows by column values, or Search Box to filter table rows by search terms.

I'm going to stop at the attribute "Column title|Record attribute". This attribute determines how to populate the data table. Enter a pair of values per line with the column title and the record attribute, separated by pipe symbol (|). Continuing with the post example, the table has two columns, the Country column to display the country names in the country column of the CSV file and the Capital column.

Events

The DataTable DS field triggers the cff-datatable-click custom event when its cells are clicked. The custom event receives the index of the dataset record corresponding to the clicked row.

<script>
    jQuery(document).on('cff-datatable-click', function(evt, index){
        console.log(getField('fieldname1').records[index]);
    });
</script>