Multiple Filters for Columns

Hi,

thanks for your question, and sorry for the trouble.

The Row Filter Extension can search for multiple words, but as you mention the user would not be able to choose them.
For that, the ColumnFilterWidgets Extension from https://tablepress.org/extensions/datatables-columnfilterwidgets/ should be a better choice.

Regards,
Tobias

Hi Tobias,

Would this still only allow the user to choose one field per column? What if you wanted to be able to choose say two of the fields in a column but none of the rest? Excel has features like that where you can choose multiple fields in a column that you want displayed while still excluding some.

Will this do it?

Hi,

the extra Shortcode parameters that are described on the page above should be helpful for that. With those, you can exclude certain column to have a dropdown field, and you can set how many selections a user can make in the columns that have field.

Regards,
Tobias

Hi Tobias,

I put the code in as in the documentation but the drop downs don’t show up.

Do you know what I’m doing wrong?

https://sandbox.koolkiwi.com/10243-2/

the shortcode – [table id=120 datatables_columnfilterwidgets=true /]

Hi,

the reason for this is that you are still using the outdated TablePress 1.4 and not the latest version 1.5.1. Please update TablePress.

Regards,
Tobias

Hi,

I’ve updated to Tablepress 1.5.1 and still don’t see any filters for the columns.

Am I doing something wrong?

Hi,

are you sure? The file https://sandbox.koolkiwi.com/wp-content/plugins/tablepress/js/jquery.datatables.min.js is still the old one for me…

Regards,
Tobias

Ah works good now except if you’re not logged in the filters have

<div>field</div> I don’t get that issue logged in. Any ideas?

seems to work fine now. Is there a way to line up the filter fields better above the columns?

Hi,

that’s great to hear! This was probably related to some caching then.

To better line up the fields and the columns, you’d have to set column widths and width for the dropdown. In this example, you can to that by adding this to the “Custom CSS” textarea:

.column-filter-widgets .column-filter-widget {
    width: 20%;
    padding: 0 5px;
    box-sizing: border-box;
}
.column-filter-widgets .column-filter-widget:first-child {
    padding-left: 0;
}
.column-filter-widgets .column-filter-widget select {
    width: 100%;
}
.tablepress-id-120 th,
.tablepress-id-120 td {
    width: 20%;
}

Regards,
Tobias