Sort results by checking options (checkboxes) instead of a search field

Hi,

thanks for your question!

Good and bad news: Yes, something like this is possible with the JS features that TablePress offers. However, there’s no user interface for this, so that you will have to develop this on a custom basis with the API functions that the DataTables JS library (which is what TablePress uses for the search and sort functions) offers. For details and examples, please see the DataTables website at https://www.datatables.net/

Now, for one common use case (filtering with drop downs), there is an easier possibility in the form of a TablePress Extension. Maybe that’s interesting as well: https://tablepress.org/extensions/datatables-columnfilterwidgets/

Regards,
Tobias

Hello. I have my table set up and I’ve added the ColumnFilterWidget, which I uploaded as any other plugin (is is supposed to reside somewhere in the TablePress folder instead?

Anyway, I can’t find any good documentation on using this extension. I cannot figure out how to use the separated value option. There’s no backend feature for setting this up. As of now, I have a dropdown option for every field in my column instead of a category. I’m so lost. I need 21 different categories in my dropdown list. Each category in my column fields are separated by a column, but I’m also using bars ‘|’ to place between category words (eg: Pendant | Suspended | Ceiling Mount).

I probably haven’t been clear enough, but could you possibly help? TablePress setup was the easy part (thank you!), but I’m at a loss with column filters. Thanks in advance. Just let me know if you need login or anything to see what I’ve set up.

Here’s a link to the page. You can see what’s going on with the filtering dropdown.

https://paniclightingco.com/manufacturer-new/

Steve

Hi,

no, the Extension is installed just fine. In fact, it must not go into the TablePress folder, as it would then be deleted during a plugin update.

Regarding the separated value option:
You can use that in another Shortcode parameter:

[table id=2 datatables_columnfilterwidgets=true datatables_columnfilterwidgets_separator=", " /]

However, I’m not really sure how you could have both the comma , and the bar | as a separator here… You could try

datatables_columnfilterwidgets_separator=", |\| "

but you might have to settle with just one of them (either commas or bars).

Regards,
Tobias

Thanks. Okay, so I tried the shortcode parameter for the comma, but I’m still not getting separate filters. For example, a manufacturer offers Interior, Exterior, Residential, Commercial lighting options. I need separate dropdown options for “Interior” “Exterior” “Residential” and “Commercial”.

What I’m still getting is a single filter that’s “Interior, Exterior, Residential, Commercial” all in one line. I haven’t removed the bars yet though. I’m really sorry to bug you, but this plugin is exactly what I need and it will be perfect if I can just get this ColumnFilter widget part down. Hope you can decipher the above.

Hi,

ah, I see. You won’t get separate filter boxes with this. You will get one filter box per column.
The separator can be used to split the values within that column only.

Regards,
Tobias

Hmmmm… I thought you could, judging by this example page:

https://datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/separator.html

Seems like they did in the Platform column.

I wanted to break down mine like that example – I would just have many more options.

So this can’t be done? Again, thanks for your time.

Looks like this site did something like that too for Location:

https://www.hungercenter.org/subjects/advocacy-and-education/

I found the problem. I copied the code from the email notification I received. It had changed “, ” to ", "

So that was the problem. Works fantastically now. Thanks again! I believe I owe you a donation!

Steve

One more small question:

I’m using this to change the width of my first column (was too small).

.tablepress-id-2 .column-1 {
width: 200px;
}

My second column is too wide – i’d rather that extra width go to the third column. I’ve tried using this, but no change:

.tablepress-id-2 column-2 {
width: 200px;
}

Can you tell my what the correct CSS should be to size my second column? Thanks!

Steve

Never mind. Seems to be displaying widths correctly now. ??

Hi,

ah, I guess there was some misunderstanding on my part then. I had interpreted your “separate dropdown options” as separate dropdown fields instead of just separate options within the same dropdown.
The latter is indeed what that separator parameter in the Shortcode can achieve if the separator string is chosen correctly.
Good to hear that you were able to fix the wrong quotation marks and the column widths! ??

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!