WordPress.org

Forums

TablePress
[resolved] TablePress - sort column by Time of Day (10 posts)

  1. studiodebgmail
    Member
    Posted 1 year ago #

    Hi Tobias,

    Please see my current test table here: http://69.195.124.167/~eastbbc2/meeting-directory-2

    You can see I have a column displaying the Time of Day, and as formatted, the sort function doesn't work properly (For example, displaying 11:00pm before 9:00am since 1 comes before 9).

    I looked at some other threads that seem to have related topics but didn't see a solution. I'm hoping there's a way to make this work.

    Can I assign special number formatting (TIME) to the column as you can do in Excel that might make sorting function properly?

    I don't want to display the times in military time because that will be too confusing for end users, but I have another idea... Is it possible that I could create a hidden column that doesn't display on the front end - it would contain translated military values (ie 23:00 for 11:00pm) and that somehow I could point the sort widget at the top of the visible column to the hidden column? Does that make sense? Just trying to think of a way to make this work...

    Thanks!

    https://wordpress.org/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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 http://wordpress.org/support/topic/sorting-a-column-with-a-custom-date-format?replies=4#post-4988516 for some details on that.

    Regards,
    Tobias

  3. studiodebgmail
    Member
    Posted 1 year ago #

    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!

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  5. studiodebgmail
    Member
    Posted 1 year ago #

    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!

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  7. studiodebgmail
    Member
    Posted 1 year ago #

    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 ] } ]

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  9. studiodebgmail
    Member
    Posted 1 year ago #

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

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • TablePress
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic