Formidable Forms Community Site

The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk
Subscribe

Using DataTables with Formidable Pro

Labels

This Discussion is public

Notifications

Don't be scurred!  It's easy!

  1. Go to http://www.datatables.net/download/ and download the zip file.
  2. Push the zip file to /wp-content on your web server and unzip the file.
  3. You have a choice.  You can put your JavaScript tags in the "Before Content" of your view, in which case DataTables will be configured to work only on the one view 
            <script type="text/javascript" charset="utf-8" src="http://yourUrl.com/wp-content/DataTables-1.9.4/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="http://yourUrl.com/wp-content/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#your_data_table_id').dataTable();
} );
</script>

    or you can put the tags in your theme functions.php, in which case DataTables will be available to all of your views.

    function set_dataTables_Configuration() {
?>
<script type="text/javascript" charset="utf-8" src="http://yourUrl.com/wp-content/DataTables-1.9.4/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="http://yourUrl.com/wp-content/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#your_data_table_id').dataTable();
} );
</script>
<?php
}

    I started by getting DataTables to work in one view and, later, I moved the scripts to functions.php.

  4. Import the DataTables demo CSS stylesheet to get started.  Either put the following in your theme style.css or wrap it in <style> tags and put it in "Before Content" of your view:

    @import "http://yourUrl.com/wp-content/DataTables-1.9.4/media/css/demo_table.css";

  5. Assign the id and DataTable's default CSS class ("display") to your view's table tag e.g.

    <table id="your_data_table_id" class="display">

  6. And, voila, your done!  Now, go to http://www.datatables.net/blog/Getting_started_with_DataTables%3A_First_steps if you have any questions.

Whoops!  Don't forget to invoke the set_datatables_Configuration function, if you decide to put the JavaScript in functions.php e.g.

add_action ('wp_footer' , 'set_dataTables_Configuration');

Can you help me get these working?

http://datatables.net/extras/tabletools/

http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html

The problem I had with Table Tools is that it would not display.  So I went to the Data Tables support forum and got resolution.  Try using the support forums; they're very helpful over there.  Here's the thread I started, which helped me to resolve my problem:

http://datatables.net/forums/discussion/19114/tabletools-buttons-do-not-display

As far as column sorting look up the documentation on aoColumnDefs and in particular the bSortable option.   Here's what I have:

"aoColumnDefs":
[
{ "bSortable": false, "aTargets": [ 2 ] }
],

Which means that all the columns should be sorted except column #3 (the columns start at zero e.g. 0, 1, 2, ...).

 

Note that
#your_data_table_id
needs to be unique for each table you display.

In the setup code that you put into your theme or in functions.php, you need to define each table with its own unique table ID:

jQuery(document).ready(function() {
jQuery('#unique_table_01').dataTable(
{
sScrollX: "100%",
"sScrollY": "250px",
"bPaginate": false,
"bScrollCollapse": true,
"aoColumnDefs": [
{ "asSorting": [ "asc","desc" ], "aTargets": [ 0 ] },
{ "sWidth": "20%", "aTargets": [ 0 ] }
]
} );
} );

jQuery(document).ready(function() {
jQuery('#unique_table_02').dataTable(
{
sScrollX: "100%",
"sScrollY": "250px",
"bPaginate": false,
"bScrollCollapse": true,
"aoColumnDefs": [
{ "asSorting": [ "asc","desc" ], "aTargets": [ 0 ] },
{ "sWidth": "20%", "aTargets": [ 0 ] }
]
} );
} );

jQuery(document).ready(function() {
jQuery('#unique_table_03').dataTable(
{
sScrollX: "100%",
"sScrollY": "250px",
"bPaginate": false,
"bScrollCollapse": true,
"aoColumnDefs": [
{ "asSorting": [ "asc","desc" ], "aTargets": [ 0 ] },
{ "sWidth": "20%", "aTargets": [ 0 ] }
],

} );
} );

In your FP view, in the "before content" area, you need to be sure to use the unique DataTable ID that you defined in the code you put into your theme or functions.php.

<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 nowrap" id="unique_table_03" width="100%">

<thead>

<tr>

<th>Store Name - Click Name for details</th>

<th>Address</th>

<th>City</th>

<th>State</th>

<th>Postal Code</th>

<th>Country</th>

<th>Phone</th>

<th>Web Site</th>

<th>Email</th>
</tr>

</thead>

 

 

Here are some additional examples and documentation of using DataTables with FP:

 

Example: DataTables – display a table of a form’s entries

http://community.formidableforms.com/help-desk/example-datatables-display-a-table-of-a-forms-entries/

 

Scrollable, Seachable, Sortable table of entries via direct SQL query

https://formidableforms.com/help-desk/scrollable-seachable-sortable-table-of-entries-via-direct-sql-query/

 

Filtered – Scrollable, Seachable, Sortable table of entries via direct SQL query

https://formidableforms.com/help-desk/filtered-scrollable-seachable-sortable-table-of-entries-via-direct-sql-query/

 

Discussion closed.