JQuery DataTable Shortcode Snippet for HTML Table Views

By: Walter Jones | Asked: 08/03/2022
ForumsCategory: Code SnippetsJQuery DataTable Shortcode Snippet for HTML Table Views
Walter JonesWalter Jones asked 2 years ago

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:

 

    • More searching functionality
    • Complex searching across multiple columns at once
    • Easily changeable logic operators
    • Custom conditions
    • Fully internationalisably

 

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/

Bobby Clapp replied 2 years ago

Nice work! The datatables plugin does require a specific HTML table format for it to work. You might mention that somewhere.

Walter JonesWalter Jones replied 2 years ago

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 😂

Rob LeVineRob LeVine replied 2 years ago

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?

Walter JonesWalter Jones replied 2 years ago

What a great idea Rob! I am working on it now.

Walter JonesWalter Jones replied 2 years ago

SearchBuilder is fully integrated Rob! Thanks for the idea!

5 Answers
Best Answer
Shawn Pery answered 2 years ago
Just bought this and it works perfectly. Love not having to enter the script every time. Great work Walter!
Walter JonesWalter Jones replied 2 years ago

Thank for the feedback! Glad it worked for you!

Walter JonesWalter Jones answered 2 years ago
Screenshot of mobile view. 
Attachments
Bobby Clapp replied 2 years ago

Solid!

Bobby Clapp answered 2 years ago

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.

Walter JonesWalter Jones replied 2 years ago

Funny you should mention that, it's in process 🙂

Bobby Clapp replied 2 years ago

How's this part going, Walter?

Walter JonesWalter Jones replied 2 years ago

Slow 🙂

Walter JonesWalter Jones replied 2 years ago

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.

Bobby Clapp replied 2 years ago

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.

Bobby Clapp replied 2 years ago

Also, I've been promoting your code and gotten you a couple of sales recently. 🙂

Walter JonesWalter Jones replied 2 years ago

Thank you sir!

Rob LeVineRob LeVine answered 2 years ago
Another request, though maybe I'm missing something in its use. I want to send parameters such that I can turn on/off buttons, search bar, info bar, etc.
Walter JonesWalter Jones replied 2 years ago

Right now I do this by commenting out the line of code that relates to the buttons.

But I will look further into it.

Rob LeVineRob LeVine replied 2 years ago

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.

Rob LeVineRob LeVine replied 2 years ago

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.

Walter JonesWalter Jones replied 2 years ago

Rob I have built this in now. Check your e-mail I will send you an updated json file.

Walter JonesWalter Jones replied 2 years ago

Let me know what you think.

Luke M answered 2 years ago
Hi Walter. How does your code work with nested views and formidable shortcodes used inside <td> tags  (e.g. [frm-field-value...]) ? Have you tested live search results and conditions ? Cheers. 
Walter JonesWalter Jones replied 2 years ago

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.

Bobby Clapp replied 2 years ago

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.

Luke M replied 2 years ago

I will spend 20 buck to see the magic happen :).

Walter JonesWalter Jones replied 2 years ago

If anything it will work for your standard html tables for certain. Message me if you have any problems.

Luke M replied 2 years ago

Magic happened ! Nice work Walter.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right