Add radio buttons filters

Add radio buttons filters

daveosdaveos Posts: 19Questions: 4Answers: 0
edited January 2020 in Free community support

Hi,
Can I add radio buttons on top of the table that act as filters?

I have a table with a "destinations" column, that contains a list of cities. And I want the user to be able to filter the list depending on the cities they're interested in so they can plan their itineraries. So I'd need a bunch of radio buttons.

I'm using Tablepress on Wordpress.
How can I achieve this?
Thanks!

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Here is a n example using chekboxes:
    http://live.datatables.net/wenaxuti/1/edit

    You will want to read Search Plugins. It uses draw() to execute the plugin which evaluates each row against the selected checkboxes.

    Kevin

  • daveosdaveos Posts: 19Questions: 4Answers: 0

    That's exactly what I want, thanks!
    Could you please show me an article or tutorial that explains how to install this plugin on Wordpress? (Tablepress).

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Have no idea about Tablepress. However is a similar example that uses column().search(). Maybe that will be easier for you to implement:
    http://live.datatables.net/vipifute/1/edit

    Someone else on the forum may be able to help with Tablepress specifics.

    Kevin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    @daveos This blog post should get you going, it's talking about WordPress/TablePress.

    Colin

  • daveosdaveos Posts: 19Questions: 4Answers: 0
    edited January 2020

    @kthorngren thanks for your help!
    @colin thanks for the link, but I still couldn't figure it out.

    This is the link to the table: https://moroccoultimateguide.com/tours2/

    And this is the code that I used:

    https://jsfiddle.net/qjdzvL53/

    I then include the TablePress shortcode:
    [table id=8 responsive=”scroll” datatables_columnfilterwidgets=true datatables_columnfilterwidgets_exclude_columns=1,2,3,4 datatables_columnfilterwidgets_max_selections=1 /]

    Unsurprisingly, it doesn't work. Could you please tell me where I went wrong? Should I just install Datatables manually?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    You are getting errors in the browser's console:

    Uncaught TypeError: $ is not a function

    A search for Typepress and the error yields lots of results like this SO thread. Maybe this suggestion will help:

    jQuery(document).ready(function($){
    
    // jQuery code is in here
    
    });
    

    Kevin

  • Sasori7Sasori7 Posts: 26Questions: 10Answers: 0

    I followed the column filter and it works great (once I figured out how the column was defined).
    How would I make something filtered on page load?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Use search or searchCols to define the initial table search.

    Kevin

  • Sasori7Sasori7 Posts: 26Questions: 10Answers: 0

    thanks.

Sign In or Register to comment.