Sort with html - solution doesn't work with multiple tables

Sort with html - solution doesn't work with multiple tables

beachcm65beachcm65 Posts: 22Questions: 6Answers: 0

Hi - my table isn't properly sorting a column with html.

I followed the instructions described on this page to explicitly define the column as html (I don't think I need to do this because I'm running 1.10.19). This worked when I applied this to one table, but when I applied this to a second table on the page, the first table stopped working. Here is the snippet of code I applied to both tables:
{ "orderSequence": [ "desc", "asc" ], "sType": "html" },

Here is the working version - click on the "Author" tab on the left. Here is the non-working version - the only difference is I've applied the solution to the Author and Publication table.

I'm wondering if the html isn't being being stripped because I'm using tippedjs for rollover text on the column?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Don't set the sType (or type) option for a column. DataTables will detect an HTML type column automatically now (the page you link to is an old discussion).

    The "non-working" version does appear to sort for me. Is there something specific I need to do or should be looking for?

    Allan

  • beachcm65beachcm65 Posts: 22Questions: 6Answers: 0

    Thanks for your reply Allan.

    I should have been clear about what is not working in the non-working version. The first time you click to sort by "Author Name" it does appear to sort descending. But note that these are all authors without a hyperlink. If you scroll down about a third of the way you'll come to the authors with hyperlinks that start with Z. Also, if you click to sort by "Author Name" again (ascending) it will be obvious that the sort isn't working.

    Here is a link to a version of the webpage without sType. It has the same issue as the non-working version.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Got it now - thanks! The issue is the nested HTML inside the title attribute - e.g.:

    "<span class="simple-tooltip" title="Recent Affiliation: Seattle University (2010)<br> Career Publications: 2, 2010-2018"><a href="https://app.dimensions.ai/discover/publication?facet_researcher=ur.012624142562.44" target="_blank">Nielsen, Rob</a></span>"

    The DataTables HTML strip isn't smart enough to handle that - it just does a regex replace on <.*?>. Not very smart, but it is fast, and anything else I've tried has proven to be very slow.

    Are you able to remove the title attribute for a test and confirm that is the issue? If it is, I wonder if the tooltip plug-in you are using has an alternative option for populating it with HTML?

    Allan

  • beachcm65beachcm65 Posts: 22Questions: 6Answers: 0

    Ah, yes - removing the <br> tag eliminated the issue. You actually solved 3 problems Allan, thanks! I didn't realize that Datatables had a built-in tooltip function that deals nicely with newlines. And the <br> was also messing up the Excel export, which I had posted about here. Have a good one.

    PS: I don't suppose there are any display options for the cell title tag? For example, it'd be nice to have a visual indicator that there is a tooltip.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Actually, DataTables doesn't do anything with tooltips... It might be that you are seeing the browser default tooltip which will show the title attribute contents.

    Allan

  • oliv3roliv3r Posts: 3Questions: 0Answers: 0
    edited August 2018

    I seem to have run into the same issue it seems, with a sorting plugin however.

    I'm running the code as such:

    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/file-size.js"></script>
    <script src="js/ip-address.js"></script>
    <script>
    $(document).ready(function() {
    $('#summary').DataTable( {
    "columnDefs": [
    { "type": "ip-address", "targets": [0, 1] },
    { "type": "file-size", "targets": [2, 3, 4] },
    ]
    } );
    } );
    </script>
    where I was hoping to sort my table. The IP-address is actually enclosed in an a-href.

    Looking at the javascript debugger i'm getting the following:

    In case the image is not clear enough, i'm looking at the ip-address plugin, which says that its input is the following
    <a href="some link">IP</a>

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Hi,

    The IP address sorting plug-in doesn't currently strip HTML. However, to have it do that add:

    a = a.replace( /<[\s\S]*?>/g, "" );
    

    just after the initial if statement in the ip-address-pre function.

    Allan

  • oliv3roliv3r Posts: 3Questions: 0Answers: 0

    works like a charm. something to open a MR for?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Yes, having the IP address plug-in support HTML seems absolutely valid. I'd imagine most of the time an IP address would be shown as a link anyway.

    Allan

This discussion has been closed.