[cfdb-datatable]
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
WARNING: this setting is overridden by plugin setting in WP Admin page Contact -> Database Options -> Can See Submission when using shortcodes |
| 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.
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'/>
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
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?
@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.
Thanks, I’ll try that.
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
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.
(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
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.
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"]
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.
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?
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
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?
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.
“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?
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?
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
That is something I have been meaning to put in, but for now there is no easy way to rename the column headers.
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.
Does it help if you do something like this:
[cfdb-datatable form="myform" id="myid" style="#myid td { font-size: 12pt; }"]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
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:
<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
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.
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"]
I figured it out, there was something wrong. Thanks for your help!
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?
Unfortunately there is no nice pagination function.
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.
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.