Title: Adding "Drop Down" Filtering Options
Last modified: August 21, 2016

---

# Adding "Drop Down" Filtering Options

 *  Resolved [memmullen](https://wordpress.org/support/users/memmullen/)
 * (@memmullen)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/)
 * Hi there –
 * First off, thank you for the excellent plugin, it’s by far the best table creating
   plugin I’ve used and really appreciate you making it available.
 * I’ve looked through your documentation and couldn’t find an answer for this so
   thought I’d ask here. I’ve been working on a project where I want to add a drop
   down filtering option pictured here:
 * [https://www.dropbox.com/s/5sf7lw6kifwxasp/Screenshot%202013-11-13%2010.18.29.png](https://www.dropbox.com/s/5sf7lw6kifwxasp/Screenshot%202013-11-13%2010.18.29.png)
 * I’ve created the table here: [http://argusstage.com/jmgoldmanfoundation/our-grantees/](http://argusstage.com/jmgoldmanfoundation/our-grantees/)
   and I also added the two addons for filtering, but I can’t figure out a way to
   add an option to choose to add a drop down for the filtering.
 * Can you think of anyway I could go about accomplishing this? Thanks
 * [http://wordpress.org/plugins/tablepress/](http://wordpress.org/plugins/tablepress/)

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/#post-4315259)
 * 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/](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
 *  Thread Starter [memmullen](https://wordpress.org/support/users/memmullen/)
 * (@memmullen)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/#post-4315266)
 * Thanks Tobias. I’ve downloaded and installed that plugin and tried adding it 
   to my existing table here:
 * [http://argusstage.com/jmgoldmanfoundation/test-table/](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 /]
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/#post-4315311)
 * 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
 *  Thread Starter [memmullen](https://wordpress.org/support/users/memmullen/)
 * (@memmullen)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/#post-4315383)
 * 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/](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](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](https://www.dropbox.com/s/yn75dwjvje6jtwg/Screenshot%202013-11-13%2013.01.55.png)
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/#post-4315392)
 * 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
 *  Thread Starter [memmullen](https://wordpress.org/support/users/memmullen/)
 * (@memmullen)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/#post-4315395)
 * 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/](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?
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/#post-4315453)
 * 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
 *  Thread Starter [memmullen](https://wordpress.org/support/users/memmullen/)
 * (@memmullen)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/#post-4315504)
 * 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.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/#post-4315508)
 * 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](http://wordpress.org/support/view/plugin-reviews/tablepress)
   here in the plugin directory. Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Adding "Drop Down" Filtering Options’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

 * 9 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/adding-drop-down-filtering-options/#post-4315508)
 * Status: resolved