2016-10-27 1 views
0

Ich suchte bereits nach Antworten auf meine Frage, zum Beispiel Datatables sorting time column oder Custom sort durations using jQuery DataTables, aber ich konnte nicht eine finden, die meinem Problem entspricht. Deshalb bin ich hier.Sortierung lange Dauer mit jquery Datatables

Ich benutze die jquery Databases: https://datatables.net/, um Tabellen in meinem aktuellen Projekt anzuzeigen. Ich habe Tabellen mit Spalten mit Dauern wie:

99:39:25  
322:48:43 
274:01:21 
33:10:39 

Wenn ich sie sortiert werden soll, ist das Ergebnis nicht korrekt:

99:39:25 
33:10:39 
322:48:43 
274:01:21 

ich in der Dokumentation zu dem Sortier Plug-In sah (https://datatables.net/plug-ins/sorting/) aber es hat nicht geholfen. Ich benutzte die natürliche und Zeit Sortieren und jedes Mal bekam das Ergebnis oben. Hat jemand eine Idee, wie es weitergehen soll?

Dies ist, was ich die Datentabelle in meinem HTML zu initialisieren bin mit:

<script> 
$(document).ready(function() { 
$('.dataresults').DataTable({ 
    "iDisplayLength": 25, 
    "searching": true, 
    "pagingType": "simple", 
    "order": [[7, "desc"]], 
    "columnDefs": [{ 
    "type": 'time', "targets": [6,7] 
    }], 
}); 
}); 
</script> 

Antwort

0

fand ich die auf Custom sort durations using jQuery DataTables basierte Lösung. Ich poste die Lösung, wenn jemand in meinem Fall wäre.

I ersetzt diese regex:

/(?:(\d+)m)?\s*(?:(\d+)s)?/ 

durch dieses:

/(?:(\d+):)?(?:(\d+):)?(?:(\d+):)?/ 

und es wird wie erwartet Sortierung!

322:48:43 
274:01:21 
99:39:25 
33:10:39 

Das vollständige Skript wird:

<script type="text/javascript"> 
$.extend(jQuery.fn.dataTableExt.oSort, { 
"duration-pre": function (s) {   
    var duration;  
    s = s.toLowerCase(); 
    if(s === 'n/a'){ 
     duration = -1;   
    } else {    
     d = s.match(/(?:(\d+):)?(?:(\d+):)?(?:(\d+):)?/); 
     duration = parseInt(d[1] ? d[1] : 0) * 60 + parseInt(d[2] ? d[2] : 0) + parseInt(d[2] ? d[2] : 0)/60; 
    } 
    return duration; 
} 
}); 

$(document).ready(function() { 
$('.dataresults').DataTable({ 
    "iDisplayLength": 25, 
    "searching": true, 
    "pagingType": "simple", 
    "order": [[7, "desc"]], 
    "columnDefs": [{ 
    "type": 'duration', targets: [6,7] 
    }], 
}); 
}); 
</script>