Hi,
thanks for your post, and sorry for the trouble.
Please take a look at the TablePress Extension at http://tablepress.org/extensions/datatables-columnfilterwidgets/ which is based on an add-on script for the DataTables JS library that offers the sorting and search functions.
This should be helpful in adding such dropdowns.
Regards,
Tobias
Thanks Tobias. I’ve downloaded and installed that plugin and tried adding it to my existing table here:
http://argusstage.com/jmgoldmanfoundation/test-table/
but those options are not showing up. I look in my console and I’m not seeing an JS errors so hoping to can point me to where I might find the JQuery error.
Here’s the exact shortcode I used on that page:
[table id=1 datatables_columnfilterwidgets=true datatables_columnfilterwidgets_exclude_columns=2,3,4 /]
Hi,
as it seems, the JS functions are not enabled here. Either you have unchecked the “Use DataTables” checkbox on the “Edit” screen of the table, or your theme does not contain a call like
<?php wp_footer(); ?>
right before the closing HTML </body> tag in the theme’s “footer.php”.
Regards,
Tobias
Thanks Tobias – that was the issue, it was missing from the footer.
Last question.
I was able to get the drop down filter working, but there’s something odd happening.
http://argusstage.com/jmgoldmanfoundation/our-grantees/
Once you select a filter field, all the drop-down does is show the selected field below like this this: https://www.dropbox.com/s/yceaqi8y0chngaw/Screenshot%202013-11-13%2013.00.50.png
Is there a way to just show the fields in the table that apply to the filter? I.E. – If I select 2012 from the drop down, the only thing I’d see would be the entry from 2012? Kind of like what is pictured here: https://www.dropbox.com/s/yn75dwjvje6jtwg/Screenshot%202013-11-13%2013.01.55.png
Hi,
good to hear that adding the footer helped!
The problem here seems to be that there’s HTML code in the second column. When the drop downs are created dynamically, they will read that in, but this then breaks the filter, as it does not work with HTML like this.
To verify this assumption, could you please extend the exclude parameter in the Shortcode to also not show the drop down for the second column? The plain filtering for the year should then work, and we can then continue with adding a work-around to that HTML problem.
Regards,
Tobias
Got it. I did add some inline HTML to column 2.
I’ve gone ahead excluded column #2 from the filter list but unfortunately I’m still getting the same error with just the “Year” filter enabled.
http://argusstage.com/jmgoldmanfoundation/our-grantees/
If you choose 2012, all the entries are still visible. Do you think the HTML in column 2 is breaking everything?
Hi,
I’m not completely sure, but my assumption is that this is (or better was) related to the “Search” functionality not being enabled. This seems to be a requirement for the drop down JS.
(As you now have activated it, but might not want it, you could hide it via CSS, i.e. by adding this to the “Custom CSS” textarea on the “Plugin Options” page of TablePress:
#tablepress-3_filter {
display: none;
}
Now, for the drop down box for the second column. The problem in that is the inline HTML. A work around to still have a drop down for that would be to add a new column, right next to the (current) second one, and to basically fill that with the same content as the current column, but without the HTML, and in the same format/text as it shall appear in the drop down options.
Then, you would hide that new column from the user with some CSS as well:
.tablepress-id-3 .column-3 {
display: none;
}
With this solution, there would effectively be two columns with the same data (one with HTML and one without), but only the first one is visible — while the drop down is created for the second one.
Does that make sense?
Regards,
Tobias
That did the trick.
Tobias – I really appreciate all your help. You went way out of your way to help me with this. If you’re ever interested in an engineering position at Disqus, please let me know. Thank you.
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Being an engineer at Disqus sounds interesting, but I’m not sure how that could work with me being from Germany?
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
