Sorting function with images?

Hi,

thanks for your question, and sorry for the trouble.

Yes, indeed, images can not really be sorted. The JS can obviously not “see” what’s shown on them ?? (Technically, the sorting could use the image name, but that would not really be reliable.)

In your case, I’d therefore suggest that we instruct the sorting function to use the company name (from the first column) as the data that is used for sorting, when the user tries sorting the logo column. That should make the most sense.
For that, please turn on the sorting again and add this to the “Custom Commands” text field on the “Edit” screen of the table:

"columnDefs": [ { "orderData": [ 0 ], "targets": [ 5 ] } ]

(as counting the columns starts with 0, the first column (name) has the number 0, while the sixth column (logo) has the number 5).

Regards,
Tobias

Thanks for the prompt reply Tobias. Let me rephrase the question because I only want to sort (2) individual columns. In this particular table, I only want to sort by “Company Name” and “Country” which are columns 1 and 3, respectively. I don’t want to sort by the column that displays the image. However, I can’t seem to get the sorting function to work at all and I think it’s because of the images. Does that make sense? Thanks Tobias!

Hi,

ah, ok. In that case, please use this “Custom Command”:

"columnDefs": [ { "orderable": false, "targets": [ 1, 3, 4, 5, 6, 7 ] } ]

For this to have an effect, you must however turn on the “Sorting” checkbox on the “Edit” screen as well.

Regards,
Tobias

Thanks Tobias. This may take a little tinkering to work properly. Am I able to use the “Fixed Header” extension along with the sorting function for this to work?

Here is the code I have in place when I edit the specific page the table is placed: [table id=57 datatables_columnfilterwidgets=true datatables_columnfilterwidgets_exclude_columns=2,4,5,6,7,8 / datatables_fixedheader=”top” /]

Here is the code of the edit table in tablepress: “columnDefs”: [ { “orderable”: false, “targets”: [1, 3, 4, 5, 6, 7 ] } ]

Notice how the columns have different numbers because the edit table starts with “0”. Should I match them?

I hope this makes sense Tobias. Thanks for all of your help and support!

Hi,

this looks all correct. In the Shortcode, the regular numbers (starting at 1) are used. In the “Custom Commands” they start with 0, as that’s JavaScript code.

Regards,
Tobias

Huh, well I wonder what the problem is. I inserted the custom command code and enabled the sorting function within the table. However, nothing gets filtered when a select a specific dropdown. https://www.willburt.com/contact-will-burt/international-distributors/

Hi,

ah, now I see. You are talking about the ColumnFilterWidgets, which have nothing to do with sorting. That confused me a bit here ??
For those to work, you will also have to turn on the Search/Filter checkbox. If you then don’t want to actually show the search field, you can hide it e.g. with “Custom CSS” like

#tablepress-57_filter {
  display: none;
}

Regards,
Tobias

Thank you Tobias that worked great!! Do you by chance know of a reference area with the different custom commands and what they do? such as: “columnDefs”: [ { “orderable”: false, “targets”: [ 1, 3, 4, 5, 6, 7 ] } ].

Thanks!!

Hi,

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

Yes, all those “Custom Commands” basically come from the DataTables JS library, see https://www.datatables.net/reference/option/

Best wishes,
Tobias