[cfdb-datatable]

December 15th, 2016

This documentation applies to version 2.6 and later

Summary of Shortcode Options

Option Example
Description
form [cfdb-datatable form="myform"] Required. Designates the form to display. All rows and columns are displayed by default
role [cfdb-datatable form="myform" role="Author"] Make short code only display output for user’s with minimum-required role. Choices are

  • Administrator
  • Editor
  • Author
  • Contributor
  • Subscriber
  • Anyone

WARNING: this setting is overridden by plugin setting in WP Admin page Contact -> Database Options -> Can See Submission when using shortcodes
(since 2.4.1)

show [cfdb-datatable form="myform" show="col1,col2"] Limits columns to be shown to be those designated (comma-delimited list)
hide [cfdb-datatable form="myform" hide="col1,col2"] Does not show listed columns (comma-delimited list)
header [cfdb-table form="myform" header="false"] Show or do not show the table header. Valid values are true (the default) and false
headers [cfdb-table form="myform" headers="your-name=Name,ex_field1=Email"] Allows you to change the name displayed in the table header. Map a form field names to a more readable display names. (Since 2.5.1)
limit [cfdb-datatable form="myform" limit="10"] One number: limit=”10″ means show first 10 rows. Is the same as limit=”0,10″
Two Numbers: limit=”100,10″ means show 10 rows starting at row #100)
random [cfdb-table form="myform" random="2"] Display 2 random rows from those that the short code finds. (Since 2.4)
orderby [cfdb-datatable form="myform" orderby="last-name,first-name"] Sort rows by designated columns. Use “column-name desc” to sort in descending (reverse) order
search [cfdb-datatable form="myform" search="Simpson"] Select rows to display that have any cell with the search text in it (case insensitive). Intended to mimic behavior of the “Search” field in the DataTable
filter [cfdb-datatable form="myform" filter="col1=Simpson"] Select which rows to display based on filter expression. More powerful than “search”, it can filter on multiple columns with boolean and regular expressions. If both “search” and “filter” are specified, “search” is ignored.
Options specific to this shortcode
edit [cfdb-datatable form="myform" edit="true"]
[cfdb-datatable form="myform" edit="cells"]
Enables editing mode to edit the cells and column names in the table (true) or just cells (cells). Only works if Editor plugin extension is installed. Editing will not work unless the user is logged in and his role allows for editing (see Options page, Can Edit/Delete Submission data setting. (since Version 2.6)Warning: table column headers can also be edited, but will not work properly if you are using “headers” in this short code to rename them.
editcolumns [cfdb-datatable form="myform" edit="cells" editcolumns="column3,column5"] Specify the columns to make editable. When omitted, all columns are editable.
Only works if Editor plugin extension is installed
.
dt_options [cfdb-datatable form="myform" dt_options="bJQueryUI:true, sScrollX:'100%', bScrollCollapse:true"] Allows you to specify DataTable Javascript configuration features
id [cfdb-datatable form="myform" id="myid"] Sets the id attribute on the table tag.
Same as for [cfdb-table]
class [cfdb-datatable form="myform" class="myclass"] Sets the class attribute on the table tag.
Same as for [cfdb-table]
* GENERALLY NOT USED because DataTables add its styles.
style [cfdb-datatable form="myform" id="myid" style="#myid th > td { font-size: x-small; background-color: #E8E8E8;  }"] Injects input CSS into a style tag.
Same as for [cfdb-table]
* GENERALLY NOT USED because DataTables add its styles.

 

 

Use[cfdb-datatable form="your-form"]. This shortcode provides a dynamically filterable and sortable table on your page. This is different than thefilter parameter on the shortcode. Thefilterparameter (such as in[cfdb-datatable form="your-form" filter="field1=value1"]creates a table with only the data selected by the filter. But once you have a table showing on a page, you can further dynamically filter using the “Search” field above the displayed Datatable.

Notes:

  • All options that apply to[cfdb-table]also apply to[cfdb-datatable]. Refer to the[cfdb-table] page.
  • [cfdb-datatable]relies onDataTable Javascript.

Essentially, this shortcode does the same thing as [cfdb-table] in that it outputs an HTML table. But in addition to that, it adds in DataTable Javascript that takes that table and wraps it in DataTable styles and functionality.

DataTable Features

If you want to set DataTable Features on your table, then you can pass them using the dt_option short code parameter. But realize, that your dt_options replace all the default ones

dt_options Examples:

Display 300 rows to start using “iDisplayLength”:

[cfdb-datatable form="your-form" id="mytable" dt_options="bJQueryUI:true, iDisplayLength:300"]

Outputs the following. So be sure you are providing valid JavaScript syntax.

<script type="text/javascript" language="Javascript">
   jQuery(document).ready(function() {
      jQuery('#cftble_538218743').dataTable({
         bJQueryUI:true, iDisplayLength:300 })
   });
</script>

 

Setting other display controls:

[cfdb-datatable form="your-form" id="mytable" dt_options="bJQueryUI:true, sScrollX:'100%', bScrollCollapse:true"]

 

FAQ: Why doesn’t my data table look like the one in the Admin Panel?
Because you need to include some additional style sheets which are not included by default because they could conflict with your theme’s styles. You might wish to add them to your theme’s style sheet.

(1) JQuery UI Gives it the solid bars across the top and bottom:

PHP: wp_enqueue_style('jquery-ui.css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css');

HTML: <link rel='stylesheet' id='jquery-ui.css-css'          href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css?ver=3.1' type='text/css'  media='all'/>

(2) Some demo css from data tables. But it is written in such a way that is can style other tables on the page that you don’t want to be affected by this:

PHP: wp_enqueue_style('datatables-demo', 'http://www.datatables.net/release-datatables/media/css/demo_table.css');

HTML: <link rel='stylesheet' id='datatables-demo-css'
href='http://www.datatables.net/release-datatables/media/css/demo_table.css?ver=3.1'
type='text/css'
media='all'/>

 

 

  1. Art
    April 26th, 2011 at 08:38 | #1

    Just a little tip on using “dt_options”:

    to pass an array to DataTables jQuery you might want to use square brackets [] inside the WP shortcode, but that does not work. So instead of declaring an array using square brackets do it the alternative way:

    dt_options=”bJQueryUI:true, aLengthMenu: [10,50,100,200,300,-1]” >
    dt_options=”bJQueryUI:true, aLengthMenu: new Array(10,50,100,200,300,-1)”

    Above example gives you a dropdown selection with more options than the default 10,25,50,100

  2. June 6th, 2011 at 12:46 | #2

    I love this plugin. I am trying to use it to create a list of upcoming events submitted by subscribers, not admins. The events being submitted have 12 columns of information. Most are fairly short, dates, times, etc. But I need to figure out how to get one column with typically a lot of text to continue on a seperate page or pop-up, as opposed to wrapping in the column. The one column is for an event description, submitted by users, so it will be different for each item submitted or row. I’m open to other suggestions for getting this to look appropriate though. Any ideas?

  3. Michael Simpson
    June 6th, 2011 at 13:40 | #3

    @Julie McQuade
    If you are using [cfdb-table] and [cfdb-datatable] you have the ability to apply your own styles using short code options (see page on [cfdb-table]). Conceivably you could set the column widths/heights and set “overflow:hidden” to prevent showing too much in one cell. Then you could write some JQuery to select the column’s cells and set “.hover()” mouse-enter and mouse-leave events to make a popup showing the full content of the cell.

  4. June 8th, 2011 at 17:44 | #4

    Thanks, I’ll try that.

  5. June 20th, 2011 at 06:25 | #5

    Hi,
    Plugin is great .. thanks 🙂
    I am using form to capture data into the database plugin. I have created a form that I would like to print once populated. I’m using the WP-print plugin. The only way I can think to do it is to ‘submit’ the form and then pull the fields I want to show/print into a page that uses the shortcodes. I need to filter to only show the last row from the data table … not sure how to go about that? Any ideas please? Not a programmer but reasonably literate 🙂
    Thanks
    Pete

  6. matthew
    October 15th, 2011 at 05:26 | #6

    This is the most fantastic plugin ever. You can create web applications with such ease.

    Class doesn’t currently work on datatables. Id works fine, and class works on regular tables. But class is not generated in the html.

    • Michael Simpson
      October 15th, 2011 at 11:12 | #7

      (Version 2.2) I see that “class” not generated in the HTML for [cfdb-datatable]. I looked at the code and I see that I am explicitly ignoring that value in the Datatables case, but I can’t remember why. I must have been thinking it might interfere. But I tested with it back in and it seems OK. So I’ll call that a bug and I’ll put out a fix for it in the next update. Thanks for bringing that to my attention.

      If you want to fix it yourself in advance, edit ExportToHtmlTable.php, and change this line:
      $this->htmlTableClass = ”;
      to be:
      //$this->htmlTableClass = ”;

      PS. please post future issues at Support Forum

  7. January 29th, 2012 at 10:12 | #8

    I am stuck with the datatable formatting. I want to put it similar to the one in the Admin panel. Can someone guide me, I have tried a lot. I have Newscast theme installed. Sorry but would need a step by step guide i am not a pro.

  8. February 2nd, 2012 at 13:40 | #9

    where would I place this code in order to keep the visible parts of my data table from showing? such as _wpcf7 etc.

    [cfdb-datatable form="Contact form 1" show="Submitted,YourFullName,partnersname,Address,City,State,Zip,your-email,DateofCeremony" hide="_wpcf7,_wpcf7_version,_wpnonce,_wpcf7_is_ajax_call,Submitted From,submit_time"]

    • Michael Simpson
      February 2nd, 2012 at 17:07 | #10

      I’m not sure if I fully understand your question. You can put this short code in any post or page. If you use “show” then only those fields listed in it will appear. If you use “hide” then those listed will not appear. Typically you would not need to use both “show” and “hide” in a short code. If you do, “hide” takes precedence. If you use neither, then all fields show.

  9. April 15th, 2012 at 12:39 | #11

    I want to generate a link to a datatable. I’m using it on a external website, so the shortcode is not an option for me. Is this possible?

    • Michael Simpson
      April 15th, 2012 at 13:38 | #12

      Yes go to the admin page for building short codes. Pick options like you would for a short code. Copy the export link URL that is generated. On your other website put in an IFRAME tag with SRC= to that link

  10. Klaus
    September 14th, 2012 at 14:44 | #13

    I can see the date on the database page, the short codes work in the testing mode (short code generator), but no result, if I put them on a page.
    Could it be an interference with any other plugin?

    • Michael Simpson
      September 14th, 2012 at 14:58 | #14

      One possibility: Database Options page, setting for “Can See Submission when using shortcodes”.
      If no short codes work (you see nothing on the page where you put the short code), then there might be some interference or configuration that is preventing them.
      If you see the actually short code itself on the page, then the problem is probably a plugin that enhances the WordPress editor (like Select Dean’s FCKEditor). You would have to disable that, past in the short code again & save.

  11. Klaus
    September 14th, 2012 at 16:01 | #15

    “Can See…”: set to anyone/subscriber

    No, I cannot see the short code itself, it is just on the edit page: [cfdb-html form="myform"]

    My plugins:
    amr users
    Antispam Bee
    Contact Form to DB Extension
    Email Users
    Fast Secure Contact Form
    Flexi Pages Widget
    Image Widget
    Installer
    jQuery Lightbox For Native Galleries
    Limit Login Attempts
    My Page Order
    Postie
    Q and A
    Really Simple CAPTCHA
    Search and replace
    Secure WordPress
    Sitemap
    Social Media Widget
    Stray Random Quotes
    User Access Manager
    User Meta Pro
    WordPress Database Backup
    WP-Mail-SMTP
    WPML Multilingual CMS
    WPML String Translation
    WPML Translation Management
    WP Realtime Sitemap
    WPtouch

    Could it help to de-install and install CFDB?

  12. Klaus
    September 14th, 2012 at 18:10 | #16

    I just found out: if I deactivate the User Meta Plugin, the export to EXCEL works fine. User meta seems to be in conflict with the login or database path.
    Any solution?

  13. Tony B
    November 5th, 2012 at 13:58 | #17

    Hi,

    Thank you for the plugin!

    I’m trying to layout a simple table. I’m using the datatable option because it gives me sorting and the search box. The only issue I have is that I want to rename one of the field’s label in the header. It’s pulling from Contact form 7 which doesnt’ allow spaces in the field names. Is there any way to rename one of the labels?

    I tried giong to the cfdb-html route and manually inserting my labels, but then I couldn’t have search or sorting capability. Or is there a way?

    Thanks for your help

    • Michael Simpson
      November 5th, 2012 at 14:21 | #18

      That is something I have been meaning to put in, but for now there is no easy way to rename the column headers.

  14. January 7th, 2013 at 03:02 | #19

    We use cfdb datatables and I can’t get it to display the font in anything other than x-small. I can see that this appears to be running from an inline style sheet but I can’t locate the code to change it. Any ideas how to change the default font-size of datatables? Thanks in advance.

    • Michael Simpson
      January 7th, 2013 at 14:10 | #20

      Does it help if you do something like this:
      [cfdb-datatable form="myform" id="myid" style="#myid td { font-size: 12pt; }"]

  15. Helene
    May 21st, 2013 at 10:24 | #21

    I have a table with 113 (and counting) entries. I want to show all 113 entries, and not just the first 100 as it does now. I manage to show all of them, but then I lose the search-field, which I want to keep. How can I add 200 and 300 to the drop down-menu at the top? So that I can still have the search field.
    I’ve tried the first code that shows on the comments, but it still doesn’t work.
    (And where do I put the javascript if I want to use the dt_options?)
    the web page is http://www.bokdagen.no/pameldinger (in norwegian, but still)
    Thanks

    • Michael Simpson
      May 21st, 2013 at 11:41 | #22

      You can control what is shown in that drop down menu using the datatable option like:
      “aLengthMenu”: [[25, 50, 100, -1], [25, 50, 100, “All”]]
      Where the first set is the number of rows to be shown (-1 mean all) and the second is the display values for
      See reference.

      But the problem is it will not work if you put that into the short code’s “dtoptions”. It will not work because it is square brackets [] in it. WordPress’s short codes use square brackets and it will not properly parse the short code if there are additional brackets in it.

      To get around that, you can create a normal table and manually add javascript to turn it into a datatable.
      1. Instead of [cfdb-datatable] use [cfdb-table id="mytable"] (add an “id” for your table)
      2. Add Javascript like the below to your post to initialize “mytable” as a datatable, giving it the options you like:

      1
      2
      3
      4
      5
      6
      
      <script type="text/javascript" language="Javascript">
          jQuery(document).ready(function() {
              jQuery('#mytable').dataTable({
                  "bJQueryUI": true, "aaSorting": [], "iDisplayLength": -1, "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]] })
          });
      </script>

      3. I think you will likely need to manually add the

      1
      2
      
      <script type='text/javascript' src='http://[YOUR-SITE]/wp-content/plugins/contact-form-7-to-database-extension/DataTables/media/js/jquery.dataTables.min.js?ver=3.5.1'></script>
      wp-content/plugins/contact-form-7-to-database-extension/DataTables/media/js/jquery.dataTables.min.js

      Possible styles need to be added as well. It might actually help to put in a [cfdb-datable] short code that displays nothings for the purpose of getting all the right stuff in the page.

  16. Helene
    May 21st, 2013 at 12:43 | #23

    Thanks for the quick reply. However., I am not experienced enough to manage this. I still can’t get the drop-down menu to show. Whats’ wrong here??:

    jQuery(document).ready(function() {
    jQuery(‘#mytable’).dataTable({
    “bJQueryUI”: true, “aaSorting”: [], “iDisplayLength”: -1, “aLengthMenu”: [[25, 50, 100, -1], [25, 50, 100, “All”]] })
    });

    [cfdb-table form="Påmeldingsskjema"]

  17. Helene
    May 21st, 2013 at 14:11 | #24

    I figured it out, there was something wrong. Thanks for your help!

  18. taraloca
    February 5th, 2014 at 11:04 | #25

    I am limiting the display on a page to 10 rows, but is there a way to limit it and have a pagination option through all the rows, 10 at a time, of the database?

    • Michael Simpson
      February 14th, 2014 at 15:28 | #26

      Unfortunately there is no nice pagination function.

  19. February 13th, 2014 at 16:49 | #27

    I have shortcode,
    and the problem is, that, if edit mode, is enabled, than, I can not download attached file, it just allows to rename file!

    Is it possible, to allow editor to edit, just one colum? Or, have checkbox for edit in shortcode, like in admin panel, for editing?

    Also, If I log in with User Role –> Editor, when I try to edit something, after clicking OK, It somehow shows up in that field, the same page, in witch is shortcode. Like, when double click, it shows HTML of this page in text editor.

    • Michael Simpson
      February 13th, 2014 at 18:05 | #28

      In edit mode, the file name is editable but not downloadable. However try to right-click the file name and see if you can get a menu to download without triggering edit mode on that cell. (I’m not sure if that will work).

      I’m not sure I follow the 2nd issue. Maybe I can have a look at it on your site.

Comments are closed.  Go To Support Forum