Replace Search with Category List?

Hi,

thanks for your post, and sorry for the trouble.

For this, you could take a look at the TablePress Extension from https://tablepress.org/extensions/datatables-button-filter/

Regards,
Tobias

Thank you for the very prompt reply, Tobias! I will check this out.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

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

Hi Tobias. it looks like the DataTables Button Filtering extension will meet my needs.

However, in the instructions for it, it says in part, “You will need to adjust the table ID (123?in the example) and the value for the?data-filterterm?attribute.” {Emphasis mine}

Can you tell me where I can adjust the value for the data-filerterm attribute? I did a search for it in the knowledgebase and it just referred me back to the extension page. I found no instructions for doing this.

Thank you, as always!

Hi Tobias. I am not sure if you saw my reply above, since this thread was marked as Resolved. However, I have reopened it for a follow up question. Thank you!

Hi,

the data-filterterm value is in the HTML code of the button that you need to insert on the page, by using the HTML code the is also given on https://tablepress.org/extensions/datatables-button-filter/

Regards,
Tobias

I’m sorry, Tobias, but I don’t understand how to connect the button to the specific row(s) in the table. Here is a link to a screenshot of the code I have in the page to create two of the buttons: https://app.screencast.com/FGTuwq7umvFa9

I assume the portions in quotes after “data-filterterm=” need to appear somewhere in the table for the rows that pertain to those filterterms. What I don’t know is how to do that. (To be clear, for this example, in the first to lines of html, I assume the terms “Construction-Inspection” and “Environmental” each need to be included in their respective rows (in the table) that pertain to that category. Am I wrong?

Can you clarify how I connect the button to the row? (Currently the buttons are not doing anything. You can see the page here: Featured Projects B – HMB Professional Engineers (flywheelsites.com)

Many thanks and again, I’m very sorry for the trouble.

Hi,

ok, so a few things to check:

• Please make sure to download, install, and activate the TablePress Extension from the link above as a new plugin on the site.
• Please add a new/empty row to the table and make sure that the “Head row”, “Enable visitor features”, and “Filtering/Search” checkboxes are active. (We can hide these later with CSS code, once the filtering is working.

As for the buttons and their HTML code, everything is set up correctly, from what I can see.

Regards,
Tobias

Tobias, thank you. That seems to have worked. One comment and two additional questions for you please.

Comment: I don’t think the second bullet you sent is anywhere in the setup guide for the plugin. If it is, I missed it. It would be beneficial if it were included on the plugin page.

Question1: Is it possible to add one more button, “All” that clears the filter and shows all rows of the table like it does upon initial page load?

2: Is there a way to style the buttons (colors, etc.?).

Finally, you said we could remove the search box once we get the buttons working by adding CSS. I sort of like the search box, but my client probably will want to remove it. Can you provide that code?

Many thanks for all your help.

Hi,

Regarding your comment: You are totally right, this is missing from the Extension’s documentation page. I guess it just never occurred to me that someone would want to set up button filtering without already using the normal filtering… I’ll make a note to update that page!

Regarding your questions:

1. To achieve that, it should work to add such an “All” button where you then use data-filterterm="" (that is an empty string).
2. Yes, this is possible with CSS code. I don’t have specific examples right now, but would be able to assist with this as part of the priority email support that is available for TablePress premium license holders.
3. To remove the search box, and also the (not needed) header row, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

#tablepress-1_filter {
  display: none;
}
.tablepress-id-1 thead {
  display: none;
}

Regards,
Tobias

Tobias, this is working perfectly! Thank you!

I plan to purchase the pro version primarily for mobile compatibility. I just need my client’s approval to spend their money.

Thanks for your help!!

Hi,

awesome, that’s great to hear! ??

Best wishes,
Tobias

Hi Tobias. Can I reopen this thread so it’s all together?

First, the table is working great – the client loves it!

However, they have a couple of new questions:

1. Is there a way I can include a link on another page that leads back to the filtered results for a particular category? In other words, the same filtered results that appear when one clicks on any of the buttons. (I have added a button to one of the pages (Environmental – HMB Professional Engineers (flywheelsites.com)), but it is not linking to the filtered results.

2) Is there a way to make the images in my table open in a lightbox?

Many thanks!

Hi,

great to hear that your client likes this approach! ??

1. Yes, this is possible via the Automatic Filtering feature module that is part of TablePress Pro. This allows defining a URL parameter, from which a search term should immediately be used for filtering. This can then be defined in links on other pages as well.
2. In general, that’s possible, but TablePress does not have a solution for this built-in, as something like this would be beyond the scope of a table plugin. However, it should be easily possible to use a dedicated lightbox plugin here, as these normally easily recognize images in tables as well.

Best wishes,
Tobias

Thank you! I’ll be buying the pro plugin this weekend and will look for a lightbox plugin. I may already have one that will do that.

Best regards to you! Thanks for all the support.