Ich verwende ein Jquery-Plugin namens datatables
Es ist fantastisch, aber ich kann die Daten nicht richtig nach dem Format TT / MM / JJJJ sortieren.
Ich habe mir ihre Supportformate angesehen, aber keine dieser Korrekturen scheint zu funktionieren.
Kann mir hier bitte jemand helfen?
jquery
datatables
date-sorting
jaget
quelle
quelle
Antworten:
Update 2020: HTML-Lösung
Da HTML 5 so weit entwickelt ist und fast alle gängigen Browser es unterstützen. Ein viel saubererer Ansatz besteht nun darin, HTML5- Datenattribute zu verwenden (maxx777 stellte eine PHP-Lösung bereit, die ich mit einfachem HTML verwende) . Für nicht numerische Daten wie in unserem Szenario können wir einen sortierbaren Wert verwenden
data-sort
oderdata-order
zuordnen und ihm zuweisen.HTML
<td data-sort='YYYYMMDD'>DD/MM/YYYY</td>
Hier funktioniert HTML-Lösung
jQuery-Lösung
Hier funktioniert die jQuery-Lösung .
jQuery.extend( jQuery.fn.dataTableExt.oSort, { "date-uk-pre": function ( a ) { var ukDatea = a.split('/'); return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; }, "date-uk-asc": function ( a, b ) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "date-uk-desc": function ( a, b ) { return ((a < b) ? 1 : ((a > b) ? -1 : 0)); } } );
Fügen Sie den obigen Code zum Skript hinzu und setzen Sie die spezifische Spalte mit Datumswerten mit
{ "sType": "date-uk" }
und anderen als null, siehe unten:$(document).ready(function() { $('#example').dataTable( { "aoColumns": [ null, null, null, null, { "sType": "date-uk" }, null ] }); });
quelle
/edit
dem in letzter Zeit aktualisiert werden, ich habe den Link korrigiert. Bitte beachten Sie, dass nur Datumsangaben im Format TT / MM / JJJJ sortiert werden.Datumssortierung - mit einem versteckten Element
Konvertieren Sie das Datum in das Format JJJJMMTT und stellen Sie den tatsächlichen Wert ( TT / MM / JJJJ ) in voran
<td>
, wickeln Sie es in ein Element ein und legen Sie den Stildisplay:none;
für die Elemente fest. Jetzt funktioniert die Datumssortierung wie eine normale Sortierung. Gleiches gilt für die Datums- und Uhrzeitsortierung.HTML
<table id="data-table"> <tr> <td><span>YYYYMMDD</span>DD/MM/YYYY</td> </tr> </table>
CSS
#data-table span { display:none; }
quelle
<td> <span> <%= idea.created_at.strftime("%Y%m%d") %> </span> <%= idea.created_at.strftime("%d/%m/%Y") %> </td>
HTML
zum Exportieren von Datentabellen verwenden, werden leider alle IhreHTML
Tags (einschließlich der versteckten Tags) verwendet. Das Ergebnis sind doppelte Daten in Ihrer exportierten Datei. Es exportiert die Daten<span>
auch inIch weiß, dass dies eine alte Frage ist und die Antworten auch alt sind. Kürzlich bin ich auf eine einfache und saubere Art gestoßen, Daten zu sortieren. Dies kann durch das HTML5-
data-order
Attribut für das<td>
Element erfolgen.Folgendes habe ich in meinem PHP getan:
<?php $newdate = date('d M Y', $myDateTime); // Format in which I want to display $dateOrder = date('Y-m-d', $myDateTime); // Sort Order ?> <td data-order="<?php echo $dateOrder; ?>" > <?php echo $newdate; ?> </td>
quelle
Probieren Sie dieses Plugin aus.
Wie hier angegeben , müssen Sie Moment.js und das Plugin für datierbare Momente einschließen und dann einfach das von Ihnen verwendete Datumsformat deklarieren. Das Plugin erkennt Ihre Datumsspalten automatisch und sortiert sie so, wie es sein sollte. Erläuterungen zum Format von moment.j finden Sie hier .
Beispiel:
$(document).ready(function() { $.fn.dataTable.moment('DD/MM/YYYY HH:mm'); $('#example').DataTable(); });
quelle
$.fn.dataTable.moment('DD.MM.YYYY HH.mm.ss');
? WoHH.mm.ss
ist dein Zeitformat? More2016.03.29 14.33.08
? Schauen Sie sich den Beispielabschnitt an . Es hängt alles von Ihrem Format ab.Auf diese Weise hat es bei mir funktioniert.
<td data-order="@item.CreatedOn.ToString("MMddyyyyHHmmss")"> @item.CreatedOn.ToString("dd-MM-yyyy hh:mm tt") </td>
Dieses Datumsformat im
data-order
Attribut sollte in diesem Format vorliegen, das von DataTable unterstützt wird.quelle
Wenn Sie moment.js oder eine andere Datumsformatierung nicht verwenden möchten, können Sie dem Datumswert ein Datumsformat in Millisekunden voranstellen, damit die Sortierung entsprechend der Millisekunde gelesen wird. Und verbergen Sie das Millisekunden-Datumsformat.
Beispielcode:
var date = new Date(); var millisecond = Date.parse(date);
HTML
<td>'<span style="display: none;">' + millisecond + "</span>" + date + </td>
Das ist es.
quelle
Sie können dieses Problem mit PHP beheben.
$mydate = strtotime($startdate); $newformat = date('d-m-Y',$mydate); echo '<tr>'; echo ' <td data-sort="'. $mydate .'">'.$newformat .'</td>';
quelle
Eine andere Lösung: https://datatables.net/blog/2014-12-18
mit 2 JavaScript-Bibliotheken:
dann nur das:
$(document).ready(function() { $.fn.dataTable.moment( 'DD/MM/YYYY' ); $('#example').DataTable(); });
quelle
Ich habe es versucht und für mich gearbeitet.
https://github.com/sedovsek/DataTables-EU-date-Plug-In
Ich habe den
.ToString("dd/MM/yyyy");
Formatmodus dann in meiner jQuery.Datatable verwendet.jQ unten
oTable = $('#grid').dataTable({ "sPaginationType": "full_numbers", "aoColumns": [ { "sType": "eu_date" }, null ] }); });
Die Spalte, für die Sie Datumsangaben haben, sollten Sie mit dem sType wie im obigen Code definieren.
quelle
in php oder js einfach ein Array übergeben und orthogonal verwenden, wie:
$var[0][0] = "like as u wish, 30/12/2015 or something else"; $var[0][1] = strtotime($your_date_variable);
und in datierbaren ...
$('#data-table-contas_pagar').dataTable({ "columnDefs": [ {"targets":[0],"data": [0],"render": {"_": [0],"sort": [1]}} ] });
quelle
Obwohl es so viele Antworten auf die Frage gibt, funktioniert die Datensortierung meiner Meinung nach nur, wenn im "JJJJMMTT" eine Sortierung erforderlich ist und bei Stunden / Minuten nicht funktioniert. Der Filter funktioniert nicht richtig, während die Datensortierung verwendet wird. Zumindest hatte ich dieses Problem beim Versuch in React JS.
Die beste Lösung ist meiner Meinung nach die Verwendung der Datenreihenfolge, da der Wert dynamisch für Sortierzwecke bereitgestellt werden kann und das Format während der Anzeige unterschiedlich sein kann. Die Lösung ist robust und funktioniert für alle Datumsformate, einschließlich "TT / MM / JJJJ HH: M".
Zum Beispiel:
<td data-order={obj.plainDateTime}>{this.formattedDisplayDate(obj.plainDateTime) }</td>
Ich habe diese Lösung von hier aus gefunden - Wie sortiere ich nach einer versteckten Spalte in DataTables?
quelle
Die Lösung von Zaheer Ahmed funktioniert einwandfrei, wenn Sie sich mit dem bereits in Großbritannien formulierten Datum befassen müssen.
Ich hatte ein Problem mit dieser Lösung, weil ich das US-Format verwalten musste.
Ich habe es mit dieser winzigen Änderung herausgefunden:
function parseDate(a) { var ukDatea = a.split('/'); return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; } jQuery.extend( jQuery.fn.dataTableExt.oSort, { "date-uk-pre": function ( a ) { return parseDate(a); }, "date-uk-asc": function ( a, b ) { a = parseDate(a); b = parseDate(b); return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "date-uk-desc": function ( a, b ) { a = parseDate(a); b = parseDate(b); return ((a < b) ? 1 : ((a > b) ? -1 : 0)); } });
Gefolgt von Ihrer "aoColumns" -Definition.
quelle
Diese Lösung ist völlig falsch. Sie können ein Datum nicht in eine Zahl konvertieren, indem Sie einfach jede Komponente des Datums hinzufügen. Wenn Sie diese Logik beispielsweise mit den folgenden Daten versuchen, werden Sie feststellen, dass sie nicht richtig übereinstimmt:
20/01/2014 = 2035 15/02/2014 = 2031
Das Datum der Hexe steht an erster Stelle, aufsteigend? 20. Januar? Nicht nach dieser Logik: P.
Die richtige Methode zum Ausführen der Parsedate-Methode besteht darin, die Zeichenfolge in eine gültige Datums- / Uhrzeitangabe zu konvertieren, und sie verwenden die Funktion getTime, um die Tabelle ordnungsgemäß zu ordnen.
var day = a.split('/')[0] var month = a.split('/')[1] var year = a.split('/')[2] var date = new Date(month + "/" + day + "/" + year) return date.getTime()
quelle
Ich wollte darauf hinweisen, dass bei der Verwendung von Daten vom Server über Ajax die Lösung sehr einfach ist, aber möglicherweise nicht sofort offensichtlich ist.
Bei der Rückgabe des Sortierreihenfolgen-Arrays senden Datatables (im
$_POST
) ein 2-Element-Array, das entspricht :$_POST['order'][0] =array('column'=>'SortColumnName', 'dir'=>'asc'); // 2nd element is either 'asc' or 'desc'
Daher können Sie das Datum in einem beliebigen Format anzeigen. Lassen Sie Ihren Server nur die Sortierkriterien zurückgeben, die nur auf dem basieren
sortColumnName
.In PHP (mit MySQL) verwende ich beispielsweise Folgendes:
if (isset($_POST['order'])) { switch ($_POST['order'][0]['column']) { case 0:// sort by Primary Key $order = 'pkItemid'; break; case 1:// Sort by reference number $order = 'refNo'; break; case 2://Date Started $order = 'dOpen'; break; default : $order = 'pkItemid'; } $orderdir = ($_POST['order'][0]['dir'] === 'desc') ? 'desc' : 'asc'; }
Beachten Sie, dass kein Cross-Script-Angriff möglich ist , da nichts von dem
$_POST
an$order
oder übergeben$orderdir
wird.Fügen Sie jetzt einfach eine MySQL-Abfrage hinzu:
$sql ="SELECT pkItemid, refNo, DATE_FORMAT(dOpen,'%b %e, %Y') AS dateStarted FROM tblReference ORDER BY $order $orderdir;";
Führen Sie die Abfrage aus und geben Sie nur den
dateStarted
Wert an Datatables in json zurück.quelle
benutze dieses Snippet!
$(document).ready(function() { $.fn.dataTable.moment = function ( format, locale ) { var types = $.fn.dataTable.ext.type; // Add type detection types.detect.unshift( function ( d ) { return moment( d, format, locale, true ).isValid() ? 'moment-'+format : null; } ); // Add sorting method - use an integer for the sorting types.order[ 'moment-'+format+'-pre' ] = function ( d ) { return moment( d, format, locale, true ).unix(); }; }; $.fn.dataTable.moment('DD/MM/YYYY'); $('#example').DataTable(); });
In dem Moment, in dem js für alle Datums- und Zeitformate gut funktioniert, fügen Sie diesen Snipper hinzu, bevor Sie die Datentabelle wie zuvor initialisieren.
Denken Sie auch daran, http://momentjs.com/ zu laden.
quelle
Ich habe auch das gleiche Problem.
Ich habe span mit in td wie 21.03.2017 verwendet. Auf diese Weise hat datatable dies als Zeichenfolge behandelt und die Sortierung hat nicht funktioniert.
Ich habe die Spanne in td entfernt und sie wurde behoben. wie, 21.03.2017
quelle
Ich habe im Rest Anruf verwendet
** Datumsvariable ist: Erstellt **
var call = $.ajax({ url: "../_api/Web/Lists/GetByTitle('NewUser')/items?$filter=(Created%20ge%20datetime'"+FromDate+"')%20and%20(Created%20le%20datetime'"+ToDate+"' and Title eq '"+epf+"' )&$top=5000", type: "GET", dataType: "json", headers: { Accept: "application/json;odata=verbose" } }); call.done(function (data,textStatus, jqXHR){ $('#example').dataTable({ "bDestroy": true, "bProcessing": true, "aaData": data.d.results, "aLengthMenu" : [ [50,100], [50,100] ], dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel' ], "aoColumnDefs": [{ "bVisible": false }], "aoColumns": [ { "mData": "ID" }, { "mData": "Title" }, { "mData": "EmployeeName" }, { "mData": "Department1" }, { "mData": "ServicingAt" }, { "mData": "TestField" }, { "mData": "BranchCode" }, { "mData": "Created" ,"render": function (data, type, row) { data = moment(data).format('DD MMM YYYY'); return data; }
quelle
Der einfachste Weg, um dieses Problem zu lösen
Ändern Sie einfach Ihr Design ein wenig so
//Add this data order attribute to td <td data-order="@item.CreatedOn.ToUnixTimeStamp()"> @item.CreatedOn </td> Add create this Date Time helper function // #region Region public static long ToUnixTimeStamp(this DateTime dateTime) { TimeSpan timeSpan = (dateTime - new DateTime(1970, 1, 1, 0, 0, 0)); return (long)timeSpan.TotalSeconds; } #endregion
quelle
Was für mich zu funktionieren scheint war
Schieben Sie das vollständige Datum / Uhrzeit-Objekt, das mit einer Auswahlabfrage aus meiner Datenbank abgerufen wurde, in einen Datensatz, der im datierbaren Format "2018-01-05 08:45:56" gezeichnet wird.
dann
$('#Table').DataTable({ data: dataset, deferRender: 200, destroy: true, scrollY: false, scrollCollapse: true, scroller: true, "order": [[2, "desc"]], 'columnDefs': [ { 'targets': 2, 'createdCell': function (td, cellData, rowData, row, col) { var datestamp = new Date(cellData); $(td).html(datestamp.getUTCDate() + '-' + (datestamp.getMonth()+1) + '-' + datestamp.getFullYear()); } } ], "initComplete": function(settings, json) { $($.fn.dataTable.tables(true)).DataTable() .columns.adjust(); } });
Zeilen werden richtig sortiert, dann bekomme ich ein HTML, das ich in der Reihe haben möchte
quelle
Wie ich in diesem Fall am einfachsten gefunden habe, ist das Hinzufügen der Option 'aaSorting' im JS.
Zum Beispiel:
$(document).ready(function() { $('#contacts-table').dataTable({ "aaSorting": [0, 'desc'] });
Das Problem hierbei ist, dass in diesem Beispiel Einträge aus der ersten Spalte wie STRING, jedoch nicht wie Datumsangaben sortiert werden. Wenn Sie im Quellcode das Datumsformat von TT / MM / JJJJ in JJJJ / MM / TT ändern können, funktioniert "aaSorting" ordnungsgemäß für Sie.
quelle
Verwenden Sie das
data-order
Attribut für das<td>
Tag wie folgt ( Ruby-Beispiel ):<td data order='<%=rentroll.decorate.date%>'><%=rentroll.decorate.date%></td>
Ihre Dekorationsfunktion hier wäre:
def date object.date&.strftime("%d/%m/%Y") end
quelle
Wenn Sie Ihre Daten aus einer Datenbank abrufen und für jede Zeile eine for-Schleife ausführen und diese an eine Zeichenfolge anhängen, die in Javascript zum automatischen Auffüllen von Datentabellen verwendet werden soll, muss sie folgendermaßen aussehen. Beachten Sie, dass Sie bei Verwendung des Tricks mit versteckter Spanne die einstelligen Zahlen des Datums berücksichtigen müssen, z. B. wenn es die 6. Stunde ist, müssen Sie eine Null hinzufügen, bevor dies der Fall ist. Andernfalls funktioniert der Trick mit der Spanne beim Sortieren nicht. Beispiel des Codes:
DateTime getDate2 = Convert.ToDateTime(row["date"]); var hour = getDate2.Hour.ToString(); if (hour.Length == 1) { hour = "0" + hour; } var minutes = getDate2.Minute.ToString(); if (minutes.Length == 1) { minutes = "0" + minutes; } var year = getDate2.Year.ToString(); var month = getDate2.Month.ToString(); if (month.Length == 1) { month = "0" + month; } var day = getDate2.Day.ToString(); if (day.Length == 1) { day = "0" + day; } var dateForSorting = year + month + day + hour + minutes; dataFromDatabase.Append("<span style=\u0022display:none;\u0022>" + dateForSorting + </span>");
quelle
Versuche dies:
"aoColumns": [ null, null, null, null, {"sType": "date"}, // "sType": "date" TO SPECIFY SORTING IS APPLICABLE ON DATE null ]
quelle
Behalten Sie für die Spalte, die Sie bestellen möchten, "sType": "date-uk" bei, zum Beispiel: -
"data": "OrderDate", "sType": "date-uk"
Behalten Sie nach Abschluss des Datatable-Skripts in Ajax den folgenden Code beijQuery.extend(jQuery.fn.dataTableExt.oSort, { "date-uk-pre": function (a) { var ukDatea = a.split('/'); return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; }, "date-uk-asc": function (a, b) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "date-uk-desc": function (a, b) { return ((a < b) ? 1 : ((a > b) ? -1 : 0)); } });
Dann erhalten Sie das Datum 22-10-2018 in diesem Format
quelle
Problemquelle ist das Datum / Uhrzeit-Format.
Falsche Proben: "MM-TT-JJJJ H: MM", "MM-TT-JJJJ"
Richtige Probe: "MM-TT-JJJJ HH: MM"
quelle
Am einfachsten ist es, in jedem TD-Tag der Spalte einen versteckten Zeitstempel vor dem Datum einzufügen, zum Beispiel:
<td class="sorting_1"> <span class="d-none">1547022615</span>09/01/2019 09:30 </td>
Bei der Standardreihenfolge der Zeichenfolgen ordnet ein Zeitstempel die Spalte wie gewünscht an und wird beim Rendern im Browser nicht angezeigt.
quelle
Jeder, der mit UTC-Formaten oder anderen zu kämpfen hat, kann dies lesen
Angenommen, Sie haben ein Datum in diesem Format
Zuerst können wir es mit dem Moment in Millisekunden umwandeln
In meinem Fall habe ich zum Beispiel HandleBar.js verwendet. Also habe ich eine Hilfsfunktion erstellt, um es einfacher zu machen
hbs.registerHelper('dateformat', function (datetime) { return moment(datetime).valueOf(); })
oder aber
konvertiere es einfach so
moment("Tue Oct 15 2019 08:41:35 GMT+0000 (UTC)").valueOf();
Sobald Sie fertig sind, übergeben Sie diese Werte einfach an Ihre Tabelle
Der Trick hier besteht nun darin, beide zu übergeben und die in Millisekunden auszublenden und die im UTC-Format anzuzeigen
<td > <span class="hideThisDate">{{DATA IN MILLISECONDS}}</span> {{YOUR DATE IN NORMAL FORMAT}}</td>
Verstecken Sie jetzt einfach die in Millisekunden durch CSS
.hideThisDate { display:none; }
Und du solltest gut gehen!
quelle