Links and plain text are sorted separately

jon1998

I try to create a Datatable using JQuery and sort it based on the first column. This column contains both links and plain text.

JQuery apparently sorts them separately, so first the links alphabetically and below the plain text alphabetically.

How can I mix them together, so that every text format is considered the same? I already tried a bunch of solutions, including column-type definition, custom order definition... None of them works properly.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"/>

<table id="toollist" class="table display table-bordered">
    <thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <a href="https://www.google.com">
                <strong>A</strong></a></td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>
            <strong>A</strong></td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>
            <strong>B</strong></td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>
            <a href="https://www.google.com">
                <strong>B</strong></a></td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>
            <a href="https://www.google.com">
                <strong>C</strong></a></td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>
            <strong>C</strong></td>
        <td>D</td>
        <td>E</td>
    </tr>
    </tbody>
</table>​

JavaScript:

$(document).ready(function () {
        $('#toollist').dataTable({
            "iDisplayLength": 10,
            "scrollY": "500px",
            "scrollCollapse": true,
            "lengthMenu": [5, 10, 25, 50, 100],
        });
    });

allan

Its a white space issue: http://live.datatables.net/pokafaqa/1/edit .

What is happening is that DataTables is removing the tags, but it does a trim on the string before the tags are removed. So the link ones end up looking like:

{space}{space}{space}...C

while the non-link cells are:

C

The white space is sorted to the top - hence why it looks odd.

Can you change your HTML output to remove the white space for the link one?

Allan

jon1998

Hey allan,
thanks for this answer.

I tried to trim a tags using JQuery before the Datatable is initialized like

$("a").trimLeft();

Also tried to trim the data values with mRender:

$('#toollist').dataTable({
                "iDisplayLength": 5,
                "scrollY": "500px",
                "scrollCollapse": true,
                "lengthMenu": [5, 10, 25, 50, 100],
                "aoColumnDefs": [ {
                    "aTargets": [ 0 ],
                        "mRender": function ( data) {
                            return $trim(data);
      }
    } ]

Unfortunately this doens't really work.

Can you advise how to trim the values properly?

allan

Doing it that way you would need to strip the tags first and then use $.trim().

Another option is to use a custom sorting plug-in.

The most simple way is to modify whatever is outputting the HTML though and just remove that white space.

Allan

jon1998

The problem is that I use the datatable inside a Content Editor on a Sharepoint, so what Sharepoint does is format the HTML Code everytime and apparently add the whitespaces.

allan

Got it. A plug-in is the way to go then. Try this:

$.fn.dataTable.ext.type.order['html-pre'] = function ( a ) {
    return !a ?
        '' :
        a.replace ?
            $.trim( a.replace( /<.*?>/g, "" ).toLowerCase() ) :
            a+'';
};

That will replace the default sort preformatter that DataTables uses for HTML content columns with one that will do the trim as well.

Updated example: http://live.datatables.net/pokafaqa/2/edit .

Allan

allan

I can see that this would be useful in the core btw. I've made a note to include it in future.

Allan

jon1998

Thank you very much for your excellent extra mile.
The example works also when trying the code, but not when including on my Sharepoint solution.

Is there a way to remove all spaces and linebreaks that Sharepoint includes automatically? Drives me crazy that SP messes up my code.

I also tried to sort based on a hidden, numerical column. This works perfectly fine when running it in a normal script, but not on the Sharepoint.

allan

Is there a way to remove all spaces and linebreaks that Sharepoint includes automatically?

No idea I'm afraid. I've never generated output with Sharepoint. Probably need to ask on StackOverflow.

Can you use the debugger to give me a trace of the data in the table? Also if you could say specifically which column in the trace is the one that isn't working I can take a look into it.

Allan

jon1998

Okay. Just spent some time on it and I think i circumscribed the issue now. Unfornutately I am not allowed to show you the live table, because its company confidential.
I was able to replicate the problem, however:

When pasting the code into JSFiddle, it works perfectly fine with your plugIn:
live.datatables.net/yatodaca/1/edit?html,output.

However, when running the same code on Sharepoint and also running the HTML-file in a browser, I get a different result (see attached image)

Sometimes the strange "​​" things before the actual text appear in the browser, sometimes not. But apparently thats what Sharepoint adds and I'm not able to remove it. Don't even see that in the sourcecode.
Also, when editing the table on the Sharepoint (necessary action), it always adds "rowspan="1"" to the td-tags.

Do you have a way to remove these "​​" in the plugin as well?

allan

Sounds like a character encoding error, or a UTF8 BOM.

If it is something that is added by SharePoint, that is where it would need to be removed. Probably best to ask on StackOverflow or similar.

Allan

jon1998

Okay, finally figured it out:
The special character that Sharepoint is adding is Unicode char: \u200b.

I was able to remove them by adding to replace them in your plugin:

$.fn.dataTable.ext.type.order['html-pre'] = function (a) {
    return !a ?
        '' :
        a.replace ?
            $.trim(a.replace(/<.*?>/g, "").replace(/[\u200b]/g, "").toLowerCase()) :
        a + '';
};

I also added

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

to the HTML-file.

Here is the working example:
live.datatables.net/jojezawi/1/edit?html,output

Thank you so much for your help, allan

allan

Nice one - great to hear you've got it working nicely!

Allan

manojvarma24

Hi @allan

is there any way i can sort the links and plain text? i have these following statuses (issued, confirmed,financial, trackable and settled trackable ) where trackable and settledtrackable are hyperlinks.

links and plain text here are sorted separate.
I am using jquery.dataTablesExt.js file and we have several predefined sort functions for string, num-html, date sorts and other.

is there any predefined sort function for this alpha- html sort?
Could you please let me know

colin

Hi @manojvarma24 ,

There's several sort plugins you can use - see here.

Cheers,

Colin