JQuery Datatables: Links and plain text is sorted separate

Question

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.

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

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

I think you might find your solution here: datatables.net/development/sorting — Difster
– Difster, Commented Jul 11, 2017 at 19:31
Thanks for your link. Unfortunately I tried this one before and it doesn't work :( — Jon
– Jon, Commented Jul 11, 2017 at 20:04
Is it possible that you've added something to your code that breaks the default behavior? — Difster
– Difster, Commented Jul 11, 2017 at 20:05
I also tried letting out Bootstrap, but that doesn't make any difference — Jon
– Jon, Commented Jul 11, 2017 at 20:09

Jon · Accepted Answer · 2017-07-14 14:14:04Z

0

It is a Sharepoint specific charset issue. The answer to the problem is on following Datatables forum feed: https://datatables.net/forums/discussion/43509/links-and-plain-text-are-sorted-separately#latest

However, there is also a very helpful sorting plugin posted from allan.

answered Jul 14, 2017 at 14:14

Jon

314 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Datatables: Links and plain text is sorted separate

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related