Datierbare Datumssortierung TT / MM / JJJJ Problem

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?

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-sortoder data-orderzuordnen 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
        ]
    });
    });

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 Stil display: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; 
}

Ich 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-orderAttribut 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>

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();
});

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-orderAttribut sollte in diesem Format vorliegen, das von DataTable unterstützt wird.

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.

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>';

Eine andere Lösung: https://datatables.net/blog/2014-12-18

mit 2 JavaScript-Bibliotheken:

1. cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js
2. cdn.datatables.net/plug-ins/1.10.15/sorting/datetime-moment.js

dann nur das:

$(document).ready(function() {
   $.fn.dataTable.moment( 'DD/MM/YYYY' );
   $('#example').DataTable(); 
});

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.

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]}}
    ]
});

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?

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.

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()

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 $_POSTan $orderoder übergeben $orderdirwird.

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 dateStartedWert an Datatables in json zurück.

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.

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

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;
    }

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

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

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.

Verwenden Sie das data-orderAttribut 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

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>");

Versuche dies:

"aoColumns": [
        null,
        null,
        null,
        null,
        {"sType": "date"},  //  "sType": "date" TO SPECIFY SORTING IS APPLICABLE ON DATE
        null
      ]

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 bei

 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));
            }
        });

Dann erhalten Sie das Datum 22-10-2018 in diesem Format

Problemquelle ist das Datum / Uhrzeit-Format.

Falsche Proben: "MM-TT-JJJJ H: MM", "MM-TT-JJJJ"

Richtige Probe: "MM-TT-JJJJ HH: MM"

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.

Jeder, der mit UTC-Formaten oder anderen zu kämpfen hat, kann dies lesen

Angenommen, Sie haben ein Datum in diesem Format

Di 15.10.2019 08:41:35 GMT + 0000 (UTC)

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!