DataTable ultimate date / time sorting - with custom format - sorting

Question

can somebody please help me?
I'm trying to use a custom sorting format for datable with the "ultimate date / time sorting" plugin.
It partly works... and I need help to get it complety to work.
I have a table and one of the columns named "Laufzeit" is gonna display a running time from a ticket. I let my sql database calculate the difference between a datetime field and NOW(). Then I use javascript to convert the format on client side into the format you can see in the JSFiddle.
The format is like this: 6 Tage 09:47:15 (days 'Tage' hour:minutes:seconds)
For the sorting, I'm trying this: https://datatables.net/blog/2014-12-18
It works so far, except for one small thing... when the data shows "0 days", it is sorted to the last position, not to the first. The rest of the sorting is correct.
Could someone please help me?
Thanks. :)
borsTiHD
<table class="dataTable" id="example"><tbody>
<tr>
<td>0 Tage 00:33:21</td>
</tr>
<tr>
<td>1 Tage 02:39:24</td>
</tr>
<tr>
<td>1 Tage 03:18:25</td>
</tr>
<tr>
<td>1 Tage 03:47:15</td>
</tr>
<tr>
<td>2 Tage 06:47:15</td>
</tr>
<tr>
<td>3 Tage 08:47:15</td>
</tr>
<tr>
<td>4 Tage 18:47:15</td>
</tr>
<tr>
<td>6 Tage 09:47:15</td>
</tr>
<tr>
<td>13 Tage 05:26:59</td>
</tr>
<tr>
<td>13 Tage 18:24:24</td>
</tr>
<tr>
<td>20 Tage 12:12:13</td>
</tr>
<tr>
<td>21 Tage 18:24:56</td>
</tr>
<tr>
<td>34 Tage 22:59:59</td>
</tr>
<tr>
<td>0 Tage 00:11:06</td>
</tr>
<tr>
<td>0 Tage 00:24:22</td>
</tr>
</tbody></table>
<script>
$.fn.dataTable.moment( 'DDD [Tage] HH:mm:ss' );
Table = $("#example").DataTable( {
paging: false,
searching: false,
responsive: true,
"bInfo" : true,
"ordering": true,
"columns": [
{ title: "Laufzeit:" },
],
});
</script>
PS: My fiddle:
https://jsfiddle.net/borsTiHD/Lcnaq5gu/

Answer 1

'0' is not a valid day of year by moment's documentation. When it is parsed to a moment date, the date would be changed to current's date instead. Here's an example:
console.log(moment('1 Tage 01:20:35', 'DDD [Tage] HH:mm:ss').format()) // 1st january
console.log(moment('15 Tage 01:20:35', 'DDD [Tage] HH:mm:ss').format()) // 15th january
console.log(moment('32 Tage 01:20:35', 'DDD [Tage] HH:mm:ss').format()) // 1st february
console.log(moment('0 Tage 01:20:35', 'DDD [Tage] HH:mm:ss').format()) // current date
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
So to support 0 day of year, you would need to write a custom sorting function, which would parse your input and handle the sorting. I've written some pretty basic example using regex (tests) and adding the provided dates to the current date:
var types = $.fn.dataTable.ext.type;
// Add type detection
types.detect.unshift(function(d) {
return parseDate(d) ? 'custom-moment' : null;
});
// Add sorting method - use an integer for the sorting
types.order['custom-moment-pre'] = function(d) {
return moment().add(parseDate(d)).unix();
};
function parseDate(d) {
//Format: DDD [Tage] HH:mm:ss
var parsedDate = d.match(/^\s*(\d+) Tage (\d+):(\d+):(\d+)\s*$/);
if (!parsedDate) {
return undefined;
}
return {
days: parsedDate[1],
hours: parsedDate[2],
minutes: parsedDate[3],
seconds: parsedDate[4]
}
}
Table = $("#example").DataTable({
paging: false,
searching: false,
responsive: true,
"bInfo": true,
"ordering": true,
"columns": [{
title: "Laufzeit:"
}, ],
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<table class="dataTable" id="example"><tbody>
<tr>
<td>0 Tage 00:33:21</td>
</tr>
<tr>
<td>1 Tage 02:39:24</td>
</tr>
<tr>
<td>1 Tage 03:18:25</td>
</tr>
<tr>
<td>1 Tage 03:47:15</td>
</tr>
<tr>
<td>2 Tage 06:47:15</td>
</tr>
<tr>
<td>3 Tage 08:47:15</td>
</tr>
<tr>
<td>4 Tage 18:47:15</td>
</tr>
<tr>
<td>6 Tage 09:47:15</td>
</tr>
<tr>
<td>13 Tage 05:26:59</td>
</tr>
<tr>
<td>13 Tage 18:24:24</td>
</tr>
<tr>
<td>20 Tage 12:12:13</td>
</tr>
<tr>
<td>21 Tage 18:24:56</td>
</tr>
<tr>
<td>34 Tage 22:59:59</td>
</tr>
<tr>
<td>0 Tage 00:11:06</td>
</tr>
<tr>
<td>0 Tage 00:24:22</td>
</tr>
</tbody></table>