Sorting columns with identical HTML

  • Resolved SJNBham

    (@sjnbham)


    4 years, 7 months ago

    When placing identical HTML in certain rows of the same column and then sorting by that column, the rows don’t seem to sort as expected. We thought it would sort all of the blank fields together and the identical HTML fields together. Here’s an example of the HTML we’re using in one of the fields we’re trying to sort by:

    <i class="far fa-water" title="Water Access"></i>

    What we’re seeing when sorting on that column is some of the fields with the HTML are sorted to the top, but other rows with a blank value for that column appear interspersed between more rows with the same HTML.

    Thanks for any assistance you can send our way.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    I’m not exactly sure, but from what I remember about the HTML sorting of the external DataTables JavaScript library, it works by stripping all HTML tags, and then using the remaining pure text for sorting, see https://datatables.net/reference/option/columns.type. As there is not text left after doing that here, the HTML sorting might not work.
    One idea could therefore be to simply do text string sorting here. For that, please try adding this to the “Custom Commands” text field on the table’s “Edit” screen:

    "columnDefs": [ { "type": "string", "targets": [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ] } ]

    Regards,
    Tobias

    Thread Starter SJNBham

    (@sjnbham)

    Thanks for the idea. The sorting didn’t seem to be affected by the custom command. Maybe an enhancement request would be to have a command that would allow the HTML to be included in the sort calculation.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    can you please turn the sorting on again, so that I can see this? I can’t think of a reason why this “Custom Command” wouldn’t work…

    Regards,
    Tobias

    Thread Starter SJNBham

    (@sjnbham)

    I think I might know what’s going on. There seem to be a bunch of special characters added in the blank cells (​). For example, Depot Market Square’s Park or Parkland cell shows the following when looking in Chrome dev tools:

    <a href="/services/recreation/rental-facilities/special-use-facilities/depot-market-square">​Depot Market Square</a>

    I don’t see any extra characters in the Depot Market Square cell when looking in the table editor. However, if I completely backspace out the first letter and beginning of that cell, it does appear to “delete” whatever is in there and allows it to sort correctly.

    Inspecting many of the other cells, these extra characters are showing up before, after, or interspersed with the HTML. I’m unsure where those came from. Maybe because I copied the table from HTML, pasted into Excel, and then imported into TablePress. I don’t see any special characters in the Excel fields that are blank.

    When I create a plain, new table and don’t add any content I’m not seeing these extra characters in Chrome developer tools. I’m assuming these were introduced from the Excel import. I tested a simple, clean Excel spreadsheet and imported it without any special characters being added as well.

    So I guess somehow som special characters snuck into Excel from copying the table from HTML into Excel.

    Thanks for your time on this.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    nice find! Yes, such weird invisible characters could indeed have caused this. I don’t know where they came from either, maybe something like copy/paste or Excel.
    Good to hear that you found this!

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Sorting columns with identical HTML’ is closed to new replies.