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