Date de sorting pouvant être datée jj / mm / aaaa

J’utilise un plugin Jquery appelé datatables

C’est fantastique, mais je ne peux pas obtenir les dates pour sortinger correctement selon le format jj / mm / aaaa.

J’ai regardé leurs formats de support mais aucune de ces corrections ne semble fonctionner.

Quelqu’un peut-il m’aider s’il vous plait?

Solution jQuery

Voici la solution jQuery qui fonctionne .

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

Ajoutez le code ci-dessus au script et définissez la colonne spécifique avec des valeurs de date avec { "sType": "date-uk" } et d’autres comme null, voir ci-dessous:

 $(document).ready(function() { $('#example').dataTable( { "aoColumns": [ null, null, null, null, { "sType": "date-uk" }, null ] }); }); 

Solution CSS

Si vous voulez une solution rapide, vous pouvez simplement append la valeur DateTime réelle dans chaque ligne dans le format spécifique (AAAAMMJJ) et la masquer à l’aide de CSS, cela vous permettra de sortinger cette colonne sans aucune modification JavaScript.

Voici la solution CSS fonctionnelle

HTML

 YYYYMMDDDD/MM/YYYY 

CSS

 .hide { display:none; } 

Date Sort – avec un élément caché

Convertissez la date au format AAAAMMJJ et ajoutez-la à la valeur réelle ( JJ / MM / AAAA ) dans le

, enveloppez-la dans un élément, définissez l’ display:none; style display:none; aux éléments. Maintenant, le sorting par date fonctionnera comme un sorting normal. La même chose peut être appliquée au sorting de date-heure.

HTML

 
YYYYMMDDDD/MM/YYYY

CSS

 #data-table span { display:none; } 

Je sais que c’est une vieille question et les réponses sont vieilles aussi. Récemment, je suis tombé sur une manière simple et nette de sortinger les dates. Cela peut être fait par l’atsortingbut de data-order HTML5 à l’élément

.

Voici ce que j’ai fait dans mon PHP:

     

Essayez ce plugin.

Comme indiqué ici, vous devez inclure Moment.js et le plug-in datatable-moment, puis simplement déclarer le format de date que vous utilisez. Le plugin détectera automatiquement vos colonnes de date et les sortingera comme il se doit. Pour les explications du format moment.js, cochez ici .

Exemple:

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

en php ou js il suffit de passer un tableau et d’utiliser orthogonal, comme:

 $var[0][0] = "like as u wish, 30/12/2015 or something else"; $var[0][1] = strtotime($your_date_variable); 

et, dans datatable …

 $('#data-table-contas_pagar').dataTable({ "columnDefs": [ {"targets":[0],"data": [0],"render": {"_": [0],"sort": [1]}} ] }); 

Une autre solution: https://datatables.net/blog/2014-12-18

avec 2 librairies javascripts: //cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js et //cdn.datatables.net/plug-ins/1.10.15/sorting/datetime -moment.js

alors seulement ceci:

$ (document) .ready (function () {

 $.fn.dataTable.moment( 'DD/MM/YYYY' ); $('#example').DataTable(); 

})

Si vous ne voulez pas utiliser momentum.js ou tout autre format de date, vous pouvez append un format de date en millisecondes dans la valeur de date afin que le sorting soit lu en millisecondes. Et masquer le format de date en millisecondes.

Exemple de code:

 var date = new Date(); var millisecond = Date.parse(date); 

HTML

 '' + millisecond + "" + date +  

C’est tout.

Zaheer Ahmed ‘solution fonctionne bien si vous devez traiter avec la date déjà formalisée.

J’ai eu un problème avec cette solution parce que je devais gérer la date de création aux États-Unis.

Je l’ai compris avec ce petit changement:

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

Suivi de votre définition “aoColumns”.

J’ai essayé ceci et travaillé pour moi.

https://github.com/sedovsek/DataTables-EU-date-Plug-In

J’ai utilisé le mode de format .ToSsortingng("dd/MM/yyyy"); alors dans mon jQuery.Datatable fonctionne bien.

jQ ci-dessous

 oTable = $('#grid').dataTable({ "sPaginationType": "full_numbers", "aoColumns": [ { "sType": "eu_date" }, null ] }); }); 

La colonne dont vous avez les dates, vous devez définir avec le sType comme le code ci-dessus.

Cette solution est complètement fausse. Vous ne pouvez pas convertir une date en un nombre en ajoutant simplement chaque composant de la date. Si vous essayez cette logique par exemple avec les dates suivantes, vous verrez qu’elle ne correspondra pas correctement:

20/01/2014 = 2035 15/02/2014 = 2031

La date de la sorcière vient en premier, ascendante? 20 janvier? Pas selon cette logique: P

La méthode correcte consiste à convertir la chaîne en datetime valide et à utiliser la fonction getTime pour ordonner correctement la table.

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

Je voulais souligner que lorsque vous utilisez des données du serveur via Ajax , la solution est extrêmement simple, mais peut ne pas être immédiatement évidente.

Lors du retour du tableau d’ordre de sorting, Datatables enverra (dans $_POST ) un tableau à 2 éléments équivalent à:

 $_POST['order'][0] =array('column'=>'SortColumnName', 'dir'=>'asc'); // 2nd element is either 'asc' or 'desc' 

Par conséquent, vous pouvez afficher la date dans le format de votre choix. sortColumnName simplement à votre serveur de renvoyer les critères de sorting uniquement en fonction du sortColumnName .

Par exemple, en PHP (avec MySQL), j’utilise les éléments suivants:

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

Notez que puisque rien de $_POST n’est passé à $order ou $orderdir , aucune attaque croisée n’est possible.

Maintenant, ajoutez simplement à une requête MySQL:

 $sql ="SELECT pkItemid, refNo, DATE_FORMAT(dOpen,'%b %e, %Y') AS dateStarted FROM tblReference ORDER BY $order $orderdir;"; 

Exécutez la requête et renvoyez simplement la valeur dateStarted à Datatables dans json.

utilisez cet extrait!

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

Au moment où js fonctionne bien pour tous les formats de date et d’heure, ajoutez ce snipper avant d’initialiser le datatable comme je l’ai fait précédemment.

Rappelez-vous également de charger le http://momentjs.com/

J’ai aussi le même problème.

J’utilisais span avec in td comme le 21/03/2017, ce qui permettait à datatable de traiter cela comme une chaîne et le sorting ne fonctionnait pas.

J’ai supprimé span à l’intérieur de td, et il a été corrigé. comme, 21/03/2017

J’ai utilisé dans l’appel de repos

** La variable date est: créée **

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

Le moyen le plus simple de résoudre ce problème

Il suffit de modifier votre conception un peu comme ça

 //Add this data order atsortingbute to td  @item.CreatedOn  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 

S’il vous plaît regardez cette solution officielle DataTable, en utilisant Moment.js:

Module de sorting final date / heure

https://datatables.net/blog/2014-12-18

Ce qui semble fonctionner pour moi était

pousser l’object datetime complet extrait avec une requête select de ma firebase database dans un dataset qui sera dessiné au format datatable “2018-01-05 08:45:56”

puis

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

Les lignes sont sortingées correctement, puis je reçois un fichier HTML que je veux dans la ligne

Comme je l’ai trouvé le moyen le plus simple de sortinger dans ce cas est d’append l’option ‘aaSorting’ dans le JS.

Par exemple:

 $(document).ready(function() { $('#contacts-table').dataTable({ "aaSorting": [0, 'desc'] }); 

Le problème ici est que cet exemple va sortinger les entrées de la 1ère colonne comme STRING mais pas comme les dates. Si le code source vous permet de changer le format de date du jj / mm / aaaa au aaaa / mm / jj “aaSorting” fonctionnera correctement pour vous.

Utilisez l’atsortingbut de data-order sur la

comme tel ( exemple Ruby ):

  <%=rentroll.decorate.date%> 

Votre fonction de décorateur serait ici:

  def date object.date&.strftime("%d/%m/%Y") end 

Si vous obtenez vos dates à partir d’une firebase database et que vous faites une boucle for pour chaque ligne et l’ajoutez à une chaîne à utiliser en javascript pour remplir automatiquement les datatables, il devra ressembler à ceci. Notez que lorsque vous utilisez l’astuce de l’intervalle caché, vous devez comptabiliser les nombres à un seul chiffre comme si c’était la 6e heure, vous devez append un zéro avant, sinon l’astuce de l’étendue ne fonctionne pas dans le sorting. de code:

  DateTime getDate2 = Convert.ToDateTime(row["date"]); var hour = getDate2.Hour.ToSsortingng(); if (hour.Length == 1) { hour = "0" + hour; } var minutes = getDate2.Minute.ToSsortingng(); if (minutes.Length == 1) { minutes = "0" + minutes; } var year = getDate2.Year.ToSsortingng(); var month = getDate2.Month.ToSsortingng(); if (month.Length == 1) { month = "0" + month; } var day = getDate2.Day.ToSsortingng(); if (day.Length == 1) { day = "0" + day; } var dateForSorting = year + month + day + hour + minutes; dataFromDatabase.Append("" + dateForSorting + ");