Order has changed since version 2
Order has changed since version 2
vespino
Posts: 6Questions: 1Answers: 0
I switched to version 2 last week and since the order is different. Before the order in which the table was created was kept, but now it's not. In the following example the column "Aantal" has the order, but before switching versions, the second order was the column "Datum".
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>test</title>
<link href="//cdn.datatables.net/2.0.2/css/dataTables.dataTables.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="//cdn.datatables.net/2.0.2/js/dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/2.0.2/filtering/type-based/accent-neutralise.js"></script>
</head>
<body>
<table id="meeste_achtbanen">
<thead>
<tr>
<th>Achtbanen</th>
<th>Aantal</th>
<th>Datum</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" class="pretpark" id="59">Energylandia</a></td>
<td class="center">15</td>
<td data-order="2021-09-02"><a href="#" class="date" id="2021-09-02">02-09-2021</a></td>
</tr>
<tr>
<td title="Cedar Point, Kennywood"><a href="#" class="pretpark" id="87">Cedar Point</a>, <a href="#" class="pretpark" id="86">Kennywood</a></td>
<td class="center">13</td>
<td data-order="2023-07-28"><a href="#" class="date" id="2023-07-28">28-07-2023</a></td>
</tr>
<tr>
<td><a href="#" class="pretpark" id="9">Europa Park</a></td>
<td class="center">12</td>
<td data-order="2019-05-01"><a href="#" class="date" id="2019-05-01">01-05-2019</a></td>
</tr>
<tr>
<td title="Haunted Hoochie, Kings Island, Ohio State Fair"><a href="#" class="pretpark" id="88">Haunted Hoochie</a>, <a href="#" class="pretpark" id="90">Kings Island</a>, <a href="#" class="pretpark" id="89">Ohio State Fair</a></td>
<td class="center">12</td>
<td data-order="2023-07-31"><a href="#" class="date" id="2023-07-31">31-07-2023</a></td>
</tr>
<tr>
<td><a href="#" class="pretpark" id="93">Six Flags Great America</a></td>
<td class="center">12</td>
<td data-order="2023-08-03"><a href="#" class="date" id="2023-08-03">03-08-2023</a></td>
</tr>
<tr>
<td><a href="#" class="pretpark" id="84">Six Flags Great Adventure</a></td>
<td class="center">11</td>
<td data-order="2023-07-26"><a href="#" class="date" id="2023-07-26">26-07-2023</a></td>
</tr>
<tr>
<td><a href="#" class="pretpark" id="90">Kings Island</a></td>
<td class="center">11</td>
<td data-order="2023-08-01"><a href="#" class="date" id="2023-08-01">01-08-2023</a></td>
</tr>
<tr>
<td><a href="#" class="pretpark" id="9">Europa Park</a></td>
<td class="center">10</td>
<td data-order="2020-07-29"><a href="#" class="date" id="2020-07-29">29-07-2020</a></td>
</tr>
<tr>
<td><a href="#" class="pretpark" id="59">Energylandia</a></td>
<td class="center">10</td>
<td data-order="2021-08-30"><a href="#" class="date" id="2021-08-30">30-08-2021</a></td>
</tr>
<tr>
<td title="Ferrari Land, PortAventura Park"><a href="#" class="pretpark" id="67">Ferrari Land</a>, <a href="#" class="pretpark" id="66">PortAventura Park</a></td>
<td class="center">10</td>
<td data-order="2022-04-30"><a href="#" class="date" id="2022-04-30">30-04-2022</a></td>
</tr>
</tbody>
</table>
<script>
$('#meeste_achtbanen').dataTable({
'order': [[ 1, 'desc' ]],
'searching': false,
'paging': false,
'info': false,
});
</script>
</body>
</html>
Now I know I can change "order" for this example, but I have tables the rely on the order the table is created in.
'order': [[ 1, 'desc' ], [ 2, 'asc' ]],
Answers
Interesting. I'm mildly surprised by the change, as I did do some work on stable sorting for 2.0. However, I can see that "Kings Island" and "Six Flags Great Adventure" have their order reversed. I'll need to look into why that is - I've added to my todo list
.
In general I haven't considered the load order of the data to be significant, so applying a sort condition on the data should be done, but I would like to understand what has changed for this.
Allan
Cheers.
I've been looking into this and have identified what is going on.
The key are these two blocks which were introduced in DT2 to ensure a stable and determinative sort.
Specifically, on each sort action, it will initially reorder the data into the order that it was loaded with, so that whatever sorting is applied is always starting from the same point.
We can see that if you sort on your "Aantal" column ascending. The "Six Flags Great Adventure" is shown before "Kings Island" since that is the way it was loaded.
However, if you do a descending sort, I reverse the order with
aiOrig.reverse();, so that the ordering is preserved from the data that was loaded, it is just in the other direction.That means that "Kings Island" will appear before "Six Flags Great Adventure", which is correct - it is reversed from the ascending order.
I think that is the correct action, but you might be looking for a way to disable that perhaps? So that when sorting by "Aantal" that "Six Flags Great Adventure" would always appear before "Kings Island" regarding of sorting direction? I would not consider that a stable sort is the thing.
Allan
I think I understand what you are saying, but since English isn’t my first language, I will try to explain what I’m looking for. The list/data I have is the number of roller coasters I have ridden on one day. I’m looking to sort this list descending. There are however parks that I’ve been to where I’ve ridden the same amount of roller coasters, and I would like to see the date and park where I have ridden a certain amount first, first in de list. I haven’t put any thought in sorting “aantal” ascending to be honest.
@allan Any news on this?
Sorry for the delayed reply. It sounds like you need to order by two different data points: date then count.
You can use
columns.orderDatato tell DataTables what column(s) to order by.Allan
But I'm not sorting by count, I'm sorting by the ID from the database. That mean I would have to add a new column?
@allen have the new versions effected to outcome of my issue? For now I have added an extra column that solves it for me, but I'm wondering why it did work for me with version 1.
If you want to sort by the id, then yes, that should be present on the client-side.
I detailed above what is happening with the current data set / example you provided. If your running data is different to that, I'd be happy to take a look at it.
Allan