Formidable Forms is the most robust data-driven application-building software available (in my opinion). The sky really is the limit when it comes to what you can do, from simple contact forms to robust applications good enough for the government to use. Prior to Strategy 11 developing the visual views addon, many of us would code HTML Tables to display our data within a view. This was time-consuming and sometimes cumbersome. Now with Visual Views, you can create an HTML Table view at the drop of a hat, code written for you by FF. The problem is, now how can you search it in real-time? How can you export the view as a PDF, Copy the Contents of the filtered view or download the view as a CSV quickly?
All of these things were almost impossible with the old HTML Tables, without adding some custom code to each view, etc. While creating an application for a local governmental agency, and building views by hand time and time again, I decided I wanted to look for another option. I knew I wanted to use JQuery Data-Tables, but if you are not a developer, it can be complicated to implement onto your server. Chris Adams of FDM Digital wrote up a great tutorial a few years ago, but there had to be an even easier way to do it. So I set out to get a shortcode that could be implemented easily in a view and give me the same results. What started as a basic PHP Snippet from Andrew K, DSFF has morphed into what it is now, having been modified for much more functionality.
Now, here we are. Datatables-Shortcode for Formidable Forms is a .json file exported from the Code Snippets Plugin, that is implemented as a shortcode that turns any HTML table wrapped in the shortcode into a fully functional JQuery Data-Table. The shortcode allows for the pre-determined sort of a column and the order in which it will be sorted. It further allows you to export your filtered view as a PDF, PRINT, CSV, or copy the content to your notepad. These buttons can be turned on and off via shortcode.
The best part is you can now search that HTML table in real-time and choose how many entries you want to see, in a fully responsive DATA-TABLE. We have also included the SearchBuilder button Integration giving you:
Implementing JQuery Data-Tables into a Formidable Forms Table View has NEVER been this easy. You simply wrap the FF View ID in the shortcode on your WordPress page, or in the before and after fields of your actual view (either way works perfectly).
For a one-time fee of $20, you can start implementing this shortcode on unlimited websites, making your user experience so much easier!
Simply purchase the file, then import it into the Code Snippets Plugin to activate the shortcode.
For more information, to see the demo, or to purchase please visit:
https://joneswebdesigns.com/datatables/
Thank for the feedback! Glad it worked for you!
A next phase project:
https://datatables.net/examples/data_sources/server_side
Working with large data sets on a simple server can be challenging. If we can limit the load by injecting server side pagination and search processing, that would be ideal.
Funny you should mention that, it's in process 🙂
How's this part going, Walter?
Slow 🙂
Would this be of value to you if the shortcode allowed you to load any table within your wordpress install? I don't think I can make it work loading server side from formidable due to the way data is stored within the schema.
Useful yes, but not with Formidable as you state. Probably needs some additional eyes in helping work out how to create some joins to create a temporary table that could be loaded in.
Also, I've been promoting your code and gotten you a couple of sales recently. 🙂
Thank you sir!
Right now I do this by commenting out the line of code that relates to the buttons.
But I will look further into it.
Thanks. I'll just go back to doing it manually for now, but my situation is I have one table for which I want buttons and another for which I don't.
I had a thought about this, even though there might be a learning curve for uses, you can have them pass in the string of DOM options as seen here - https://datatables.net/reference/option/dom . That way, they can easily control what appears on the front end.
Rob I have built this in now. Check your e-mail I will send you an updated json file.
Let me know what you think.
Hi Luke. I have not tested it with nested views. However, If you have a table view created by formidable in theory it should work. I have tested it with my tables, however, none contain nested views.
Nested tables would have to be creatively designed such that it fits within a parent and last that has opening and closing table tags about.
I will spend 20 buck to see the magic happen :).
If anything it will work for your standard html tables for certain. Message me if you have any problems.
Magic happened ! Nice work Walter.
Please login or Register to submit your answer
Nice work! The datatables plugin does require a specific HTML table format for it to work. You might mention that somewhere.
Yes sir you’re absolutely correct. Interesting enough the table that visual views builds meets the standard for datatables to work, but I will add that 😂
Hey Walter, thanks for putting this together. I've been doing it "manually" for a long time and got a little sick of it, so your snippet might help. Have you considered adding support for searchBuilder, though that could be a huge can of worms?
What a great idea Rob! I am working on it now.
SearchBuilder is fully integrated Rob! Thanks for the idea!