DataTables - display a table of a form's entries

Challenge – Displaying a sortable, searchable table of a form’s entries

Solution: Use DataTables jquery plugin http://www.datatables.net/

WP Plugins required:

• None
• Optional: TablePress (TablePress is not used in this solution but there is one change to this setup if TablePress is installed)

Primary limitations:

• There is a conflict between using the nowrap parameter with DataTales and the Formidable Pro calendar display. I am currently researching a fix for this and will post it as a comment on this thread if I can resolve it.

 

Component setup:

Download DataTables here: http://www.datatables.net/download/

Copy the DataTables folder to your WordPress wp-content folder

Create a dedicated CSS file for your special formatting. See the attached file for a sample.

Copy the dedicated CSS file to the DataTables CSS folder

You must include some code in your WP header and footer. Some themes support this in their settings. If your theme does not support adding code to the header and footer you will need to modify your header, footer or functions.php file to add it.

Header:

<link rel='stylesheet' href='/wp-content/datatables/css/my_datatables.css' type='text/css' media='all' />

Footer:

*** Note: if you do not use TablePress, use this path:

<script type='text/javascript'src='http://mydomain.com/wpcontent/datatables/js/jquery.dataTables.js'></script >

*** Note: If you use TablePress, then use the following path:

<script type='text/javascript'src='http://mydomain.com/wpcontent/plugins/tablepress/js/jquery.datatables.min.js'></script >

<script type="text/javascript">

 jQuery(document).ready(function() {

               jQuery('#pccevents').dataTable(

{

    sScrollX: "100%",

    "sScrollY": "250px",

    "bPaginate": false,

    "bScrollCollapse": true,

    "aoColumnDefs": [

               { "asSorting": [ "asc","desc" ], "aTargets": [ 0 ] },

               { "sWidth": "20%", "aTargets": [ 0 ] }

               ]

    } );

} );

 

 

Formidable Pro Form and Custom Display

1. Create a form to enter your data. This example uses an event form.
2. Create a Custom Display to display the table of the form’s entries

 

Basic Settings:

Use Entries from Form:

Select your form

Display Format:

Both (Dynamic)

Detail Link:

Parameter Name: event-name

Parameter Value: key

Before Content:

<style type="text/css">

table{text-align:left;font-size:12px;}

table thead{cursor: pointer;}

table tbody tr {background: #f0f0f0;}

#content tr td, #content tr th{padding:3px 5px;}

</style>

<table border="1" cellspacing="1" cellpadding="2" class="display" id="pccevents" width="100%">

<thead>

               <tr>

                <th class="c1">Event Start Date</th>

                              <th class="c2">Event Name - Click Name for details</th>

                <th>Country</th>

                <th class="c3">State</th>

                              <th class="c4">City</th>

                              <th class="c6">Location Name</th>

                <th class="c7">Event Web Site</th>

               </tr>

</thead>

Content:

*** Note: You must insert your own form's field IDs or Keys into the Custom Display. The sample field IDs and Keys provided here will not work for you. ***

<tr>

                              <td>[event_start_date]</td>

                              <td><a href="[detaillink]">[event_name]</a></td>

                <td>[event_country]</td>

                <td>[event_state]</td>

                              <td>[event_city]</td>

                              <td>[event_location_name]</td>

                              <td>[event_website clickable=1]</td>

</tr>

After Content:

<tfoot>

               <tr>

                <th class="c1">Event Start Date</th>

                              <th class="c2">Event Name - Click Name for details</th>

                <th class="c5">Country</th>

                <th class="c3">State</th>

                              <th class="c4">City</th>

                              <th class="c5">Location Name</th>

                <th class="c6">Event Web Site</th>

               </tr>

</table>

</tfoot>

Dynamic Content:

<a href="/papercraft-events">« Return to All Events</a><br/><br/>

<h3><strong>Event Name:</strong> [event_name]</h3>

<h4><strong>Event Start Date:</strong> [event_start_date]</h4>

<p><strong>Event Cost:</strong> [event_cost]</p>

<p><strong>Event Duration:</strong> [event_duration]</p>

<p><strong>Event Web Site:</strong> [event_website clickable=1]</p>

<p><strong>Event Location Name:</strong> [event_location_name]</p>

<p><strong>Event Location Address:</strong> </p>

<p style="padding-left: 60px;"> [event_location_address]</p>

<p style="padding-left: 60px;"> [event_city], [event_state] [event_zip]</p>

<p style="padding-left: 60px;"> [event_country]</p>

<p><strong>Event Location Phone:</strong> [event_phone]</p>

<p><strong>Event Info Email:</strong> [event_email1 clickable=1]</p>

<br>

<br>

Advanced Settings:

Order:

Field: Event Start Date

Direction: Ascending

All other settings at default

 

4. Select and copy the Custom Display short code

5. Create a page

6. Paste the Custom Display short code into the page body

7. View the page.

Your table will contain all the entries from your form. The search is dynamic and the columns can be sorted by clicking on the column names. The user can select how many rows per page to display.