First Column Filter not working with DataTables ColumnFilterWidgets

Hi,

thanks for your question, and sorry for the trouble.

Yes, this is related to the column contains HTML code for links. That’s not supported by the ColumnFilterWidgets JS code.
The workaround here is to create a copy of that column, with the school names not being links.
You can then hide the second column with some CSS and hide the (not working) first dropdown with the datatables_columnfilterwidgets_exclude_columns parameter that is explained on the Extension’s web page.

Regards,
Tobias

Thank you for your response. If I understand you correctly, I would have the first column filter excluded (and the second hidden column filter enabled). In reality, the second column would be filtering the hidden column, but to the user it would appear as if the second column were filtering the first column (with link).

Is this correct?

Thank you.

Hi,

yes, totally correct ??

Regards,
Tobias

Thank you. Unfortunately, I cannot seem to get it to work. If you go to mbapreapdvantage.net you can see I have hidden column 5. Unfortunately, the filter then becomes greyed out.

Note: (I can easily hide the first filter but I am just trying to get the filtering based on a hidden column working first).

FYI – I used display: none; to hide the column. There might be another way to hide the column that allows the filter to work.

Thanks.

Never mind. I think I can make this work. I will add more if I cannot.

Ok. I now have it working at mbapreapdvantage.net. Thank you. But can I style the boxes? I would like to use Roboto Condensced so the 4 filters are on the same line like the data.

Thank you.

All I really need to do is make the font size 75%.

I see this code elsewhere but cannot get it to work.

.column-filter-widget { float:left; padding: 5px; }
.column-filter-widget select { display: block; }
.column-filter-widgets a.filter-term { display: block; text-decoration: none; padding-left: 10px; font-size: 90%; }
.column-filter-widgets a.filter-term:hover { text-decoration: line-through !important; }
.column-filter-widget-selected-terms { clear:left; }

Resolved. I figured it out. I needed to put this:

#tablepress-6_wrapper .column-filter-widgets select {
font-size: 79%;
}

Thanks for listening.

Hi,

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

Best wishes,
Tobias

It must not have registered. As a follow up I have another small problem. I ended up setting the margin and padding equal to 0 which works great.

But when I select any of the drop-downs the new state causes the menus to collapse. I would like them to stay where they are. (you can try it out to see). How would you fix this? Thanks.

Hi,

I don’t really know a solution to that, unfortunately, as I’m not really an expert with the internals of the ColumnFilterWidgets JavaScript code ?? Sorry.
You could maybe ask in the forums at https://datatables.net/ where there are more people who are directly using this JS code. Maybe they know something…

Regards,
Tobias

No worries. I know it has something to do with an after state setting:

#tablepress-6_wrapper .column-filter-widgets:after

but even if I set the same parameters as the select setting it still collapses. Thanks for your help.

Hi,

that could be possible, but I’m not sure. You could maybe try playing with that in e.g. the Google Developer Tools.

Regards,
Tobias

Thanks again. Specifically, the issue is that in the select state each drop-down list is the width of the element (in the dropdown list) with the most width. But in the after state the width collapses because that item has not been selected. So, if there was some css to keep the width of each element the same that would be it.

Hi,

yes, it should be possible to set the width, probably with something like

#tablepress-6_wrapper .column-filter-widgets select {
  width: 200px;
}

Regards,
Tobias