knuxyl knuxyl -4 years ago 136
HTML Question

JQuery Datatables column sorting

I have a problem with JQuery DataTables (datatables.net) that when I have only 2 (rows) in the table it takes 2 clicks to sort the columns (the first column sorts first click, the others are hit and miss, mostly 2 clicks).
I tested this thoroughly. I am using JQuery UI Tabs which doesn't affect it. Below is the entire html document.

<html>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/datatables/datatables.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table_id').DataTable({

});
});
</script>
<body>
<center>
<table id="table_id" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>icon</th>
<th>Name</th>
<th>Ilvl</th>
<th>Req</th>
<th>Side</th>
<th>Slot</th>
<th>Source</td>
<td>Type</td>
</tr>
</thead>
<tfoot>
<tr>
<th>icon</th>
<th>Name</th>
<th>Ilvl</th>
<th>Req</th>
<th>Side</th>
<th>Slot</th>
<th>Source</td>
<td>Type</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>253</td>
<td>614</td>
<td>E2531h</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>12532ett Winters</td>
<td>435countant</td>
<td>264Tokyo</td>
<td>23463</td>
<td>342011/07/25</td>
<td>34$170,750</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>3241Ashton Cox</td>
<td>145Junior Technical Author</td>
<td>324San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>


</tbody>
</table>
</center>
</body>
</html>


If you remove one of the rows then the problem will occur.

Does anyone have a solution for this?

Answer Source

Since the default sort is ascending, it's working like it supposed to. It's obvious that it will take two clicks to sort columns like 'Name', 'Ilvl', 'Side' etc., because they all are sorted by default 'asc', when you have clicked on the 'icon' column.

So when you click on it, there is nothing to change. If you want to change your default sorting order, then you can use the following settings to change the order.

 $.fn.dataTable.defaults.column.asSorting = ['desc', 'asc'];
 $.fn.dataTable.defaults.aaSorting = [[0,'desc']];

I hope this is clear. But if it's not then you can see the fiddle where i have changed the contents of 'Name' column alone. Compare it with the markup you have then you will understand why it doesn't sort

from

 <td>435countant</td>

to

<td>615</td>

https://jsfiddle.net/karthick6891/2x8L9b73/2/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download