Custom sorting for column filter widget dropdowns

Hi,

thanks for your post, and sorry for the trouble.

I know what you mean, but unfortunately, I don’t know a solution to this, sorry.
As the JS code for the ColumnFilterWidgets was not developed by me (I only packaged it as a TablePress Extension), I just don’t know enough to modify it.

Regards,
Tobias

Thought that would probably be the answer, but never mind.

By the way, overall TablePress is great! I’ve been trying it out for the last couple of days and it’s looking good for my needs. A few more checks to do though!

Hi,

thanks for the nice words! Good to hear that it’s been helpful so far!

Best wishes,
Tobias

Further to this question, I was going to use H, M and L in the column to save width. In the dropdown filter though I’d still want to use High, Medium and Low. I had an idea to have two columns, one with the abbreviated values and one with the full. The full column would be hidden and the abbreviated one shown, but the datatables_columnfilterwidgets_exclude_column would work the opposite way, i.e. exclude the abbreviated column as a dropdown filter but include the full column. However, this doesn’t work because the column values in datatables_columnfilterwidgets_exclude_column refer to visible columns only. Any other ideas how I could accomplish this?

Hi,

the “trick” here is to hide the columns in a different way (not via the “Hide” button on the table’s “Edit” screen): Hide them with CSS code, like

.tablepress-id-123 .column-4 {
  display: none;
}

Regards,
Tobias

I should have thought of that! Works fine.

Thanks for the excellent support.

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!

Interestingly I notice from ColumnFilterWidgets.js there is a fnSortOptions which supports a custom function being passed in, which I assume should be used as in the example at https://cyberhobo.github.io/column-filter-widgets-examples/extras/ColumnFilterWidgets/column-defs.html.

How can I pass in a fnSort using TablePress?

Hi,

you would have to add this via the tablepress-datatables-column-filter-widgets.php file of the Extension, and e.g. add

$column_filter_widget_parameters['datatables_columnfilterwidgets_column_defs'] = '"aoColumnDefs": [ { "fnSort": function( a, b ) { return a-b; }, "aiTargets": [ 3 ] } ]';

before line 110 (

if ( ! empty( $column_filter_widget_parameters ) ) {

).

Regards,
Tobias

Ah, I thought the code supported it so I could pass it in via shortcode or custom command ??

Hi,

no, sorry. Handling such JS commands in Shortcodes is always ugly, because of all the " and ] which easily throw off the Shortcode parser in WordPress (as these characters are also part of Shortcodes themselves).

The “Custom Commands” field should however work, actually. You would then need to add

"oColumnFilterWidgets": {
	"aoColumnDefs": [
		{ fnSort: function( a, b ) { return a-b; }, aiTargets: [ 3 ] }
	]
}

there. (This would have to be adjusted though, if you are using the other Shortcode parameters for ColumnFilterWidgets, as they would get replaced by this.)

Regards,
Tobias

I tried this in the Custom Commands and it was clearly being accepted, but didn’t seem to do anything. I don’t understand the JavaScript well enough to figure out why!

Hi,

the first step would be to check if the “Custom Command” actually shows up in the page’s HTML output, and to check the browser error log console for JS errors.

In your case (the link from your first post), the code is not in the output. This might be caused by the extra Shortcode parameters for the ColumnFilterWidgets. Could you test if removing those changes anything?

Regards,
Tobias

This is just in my development environment at the moment. I’ll let you know whatever progress I get.

Hi,

thanks! I hope that you can find a solution.

Best wishes,
Tobias