Add radio buttons filters

daveos

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!

kthorngren

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

daveos

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).

kthorngren

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

colin

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

Colin

daveos

@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?

kthorngren

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

Sasori7

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?

kthorngren

Use search or searchCols to define the initial table search.

Kevin

Sasori7

thanks.