TablePress – sort column by Time of Day

Hi,

thanks for your post, and sorry for the trouble.

Sorting time values is indeed tricky, as there’s no directly usable sorting algorithm in the used JS library for the format that you would like to use.

Therefore, the approach with an extra column which holds the time value in “machine-readable” (and sortable) format is indeed the best.
Please see the thread at https://www.ads-software.com/support/topic/sorting-a-column-with-a-custom-date-format?replies=4#post-4988516 for some details on that.

Regards,
Tobias

Hi Tobias,

Cool! Looks like my idea was spot on. You said to the user in the other thread

It is possible to do this with some “Custom Commands” for the DataTables JS library, specifically:

I’m a bit of a newbie. Can you translate this a bit for me? I see the code snippet that you provided and think I understand how to modify it for my scenario, but where exactly do I put it? And where is the DataTAbles JS library? Can you please be specific, utilizing filenames and locations if possible?

Thanks!

Hi,

the DataTables JS library is what TablePress uses for the sorting. In order to be able to pass special commands to it, there’s a field labeled “Custom Commands” in the lower part of the “Edit” screen for each table.
That’s where you’ll have to paste the code from the other thread (with the column numbers adjusted).

Regards,
Tobias

Ah… I’ve actually already used that… just didn’t realize the terminology.

Ok, so I’ve already got some code in the “Custom Commands” area of my table to turn off sorting for some of the columns:
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 4, 5, 6, 7, 8 ] }]

I’ve added my hidden column and adjusted the code to do the sorting on the hidden column with this code:
"aoColumnDefs": [ { "iDataSort": 3, "aTargets": [ 2 ] }, { "bVisible": false, "aTargets": [ 3 ] } ]

But I don’t know how to integrate these two pieces of code together since they’re both making modifications to “aoColumnDefs”. I tried a few ways of joining them together and nothing worked and basically I lost all sorting ability on the entire table.

Can you please advise me how to combine these two pieces of code? Thanks!

Hi,

this should be the combined version of the two code fragments:

"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 4, 5, 6, 7, 8 ] }, { "iDataSort": 3, "aTargets": [ 2 ] }, { "bVisible": false, "aTargets": [ 3 ] } ]

Regards,
Tobias

Thank you! That worked like a charm. Last question…

If I want to add another hidden column (for Day of Week, so it’s sorted chronologically rather than alphabetically) how would I modify the “iDatasort” portion of the code above? Let’s say my day of week is column X and the hidden column referencing it is column Y.

Would it be something like this… "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 4, 5, 6, 7, 8 ] }, { "iDataSort": 3, Y, "aTargets": [ 2, X ] }, { "bVisible": false, "aTargets": [ 3, Y ] } ]

Hi,

for that, you’ll have to add another “block” of code with the iDataSort command:

"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 4, 5, 6, 7, 8 ] }, { "iDataSort": 3, "aTargets": [ 2 ] }, { "iDataSort": Y, "aTargets": [ X ] }, { "bVisible": false, "aTargets": [ 3, Y ] } ]

Regards,
Tobias

Thank you so much Tobias. My table is now doing everything I want. Awesome!

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!