Date de tri date datatable jj/mm/aaaa
J'utilise un plugin Jquery appelé datatables
C'est fantastique, mais je ne peux pas obtenir les dates pour trier correctement selon le format jj/mm/aaaa.
J'ai examiné leurs formats de support, mais aucune de ces corrections ne semble fonctionner.
Quelqu'un peut-il m'aider s'il vous plaît?
solution jQuery
Voici solution jQuery de travail .
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 les valeurs Date avec { "sType": "date-uk" } et autres comme null, voir ci-dessous:
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
null,
null,
{ "sType": "date-uk" },
null
]
});
});
Solution CSS
Si vous souhaitez une solution rapide, vous pouvez simplement ajouter la valeur DateTime réelle à chaque ligne dans le format spécifique (AAAAMMJJ) et la masquer à l'aide de CSS, ce qui vous permettra de trier cette colonne sans modifier javascript.
Voici solution CSS fonctionnelle
HTML
<td><span class='hide'>YYYYMMDD</span>DD/MM/YYYY</td>
CSS
.hide {
display:none;
}
Tri par date - avec un élément caché
Convertissez la date au formatAAAAMMJJet ajoutez la valeur réelle ( JJ/MM/AAAA ) dans le <td>, emballez-la dans un élément, attribuez le style display:none; aux éléments. Maintenant, le tri par date fonctionnera normalement. La même chose peut être appliquée au tri date-heure.
HTML
<table id="data-table">
<tr>
<td><span>YYYYMMDD</span>DD/MM/YYYY</td>
</tr>
</table>
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 un moyen simple et propre de trier les dates. Cela peut être fait par HTML5 data-order attribut à <td> élément.
Voici ce que j'ai fait dans mon PHP:
<?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>
Essayez le plugin this .
Comme indiqué ici , vous devez inclure Moment.js et le plugin datatable-moment, puis déclarez simplement le format de date que vous utilisez. devrait être . Pour les explications du format moment.js, consultez ici .
Exemple:
$(document).ready(function() {
$.fn.dataTable.moment('DD/MM/YYYY HH:mm');
$('#example').DataTable();
});
en php ou js, passez simplement un tableau et utilisez 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]}}
]
});
Si vous ne souhaitez pas utiliser momentum.js ou tout autre formatage de date, vous pouvez ajouter un format de date en millisecondes dans la valeur de date de sorte que le tri se lise en millisecondes. Et cachez le format de date en millisecondes.
Exemple de code:
var date = new Date();
var millisecond = Date.parse(date);
HTML
<td>'<span style="display: none;">' + millisecond + "</span>" + date + </td>
C'est tout.
Une autre solution: https://datatables.net/blog/2014-12-18
avec 2 librairies javascripts: et // cdn.datatables.net/plug-ins/1.10.15/sorting/datetime-moment.js
alors seulement ceci:
$ (document) .ready (fonction () {
$.fn.dataTable.moment( 'DD/MM/YYYY' ); $('#example').DataTable();});
Ce qui semble fonctionner pour moi était
Poussez l'objet datetime complet récupéré avec une requête select de ma base de données dans un jeu de données 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 rangées sont triées correctement, puis je reçois le code HTML que je veux dans la rangée
Dans la colonne de votre choix, conservez "sType": "date-uk" Par exemple: -"data": "OrderDate", "sType": "date-uk"
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));
}
});
Ensuite, vous aurez la date du 22-10-2018 dans ce format
Je voulais souligner que, lorsque vous utilisez des données du serveur via Ajax , la solution est très simple, mais peut ne pas être immédiatement évidente.
Lors du renvoi du tableau d'ordre de tri, Datatables envoie (dans le $_POST) un tableau de 2 éléments queserait é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. demandez simplement à votre serveur de renvoyer les critères de tri uniquement en fonction de la variable sortColumnName.
Par exemple, dans PHP (avec MySQL), j'utilise ce qui suit:
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 du $_POST n'est passé à $order ou $orderdir, aucune attaque par scripts croisés 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 uniquement la valeur dateStarted à Datatables dans json.
Si vous récupérez vos dates dans une base de données et effectuez une boucle for pour chaque ligne et que vous l'ajoutez à une chaîne à utiliser en javascript pour renseigner automatiquement les tables de données, il doit ressembler à ceci. Notez que lorsque vous utilisez l’astuce de plage masquée, vous devez comptabiliser les chiffres à un chiffre de la date, comme si c’était la 6ème heure, vous devez ajouter un zéro avant sinon la solution de plage ne fonctionne pas dans le tri .. Exemple de code:
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>");
Le moyen le plus facile de résoudre ce problème
Il suffit de modifier votre conception un peu comme ça
//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;
}
#endregionVeuillez regarder cette solution officielle de DataTable, en utilisant Moment.js:
Plug-in de tri ultime date/heure
J'ai utilisé dans l'appel de repos
** Date Variable est: Créé **
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;
}
Essaye ça:
"aoColumns": [
null,
null,
null,
null,
{"sType": "date"}, // "sType": "date" TO SPECIFY SORTING IS APPLICABLE ON DATE
null
]
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 cette snipper avant d’initialiser le datatable comme je l’ai fait plus tôt.
Pensez également à charger le fichier http://momentjs.com/
J'ai essayé cela et travaillé pour moi.
https://github.com/sedovsek/DataTables-EU-date-Plug-In
J'ai utilisé le mode de format .ToString("dd/MM/yyyy"); puis dans mon jQuery.Datatable fonctionne bien.
jQ ci-dessous
oTable = $('#grid').dataTable({
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sType": "eu_date" },
null
]
});
});
La colonne que vous avez des 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 que cela 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 manière correcte de faire la méthode parsedate est de convertir la chaîne en une date/heure valide et d'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()
Comme j'ai trouvé le moyen le plus simple de trier dans ce cas est d'ajouter 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 trier 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 de jj/mm/aaaa à aaaa/mm/jj, "aaSorting" fonctionnera correctement pour vous.
La solution de Zaheer Ahmed fonctionne bien si vous devez traiter une date déjà formatée au Royaume-Uni.
J'ai eu un problème avec cette solution car je devais gérer la date formatée 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".
La source du problème est le format date/heure.
Mauvais échantillons: "MM-jj-aaaa H: mm", "MM-jj-aaaa"
Échantillon correct: "MM-jj-aaaa HH: mm"
Vous pouvez résoudre ce problème avec php.
$mydate = strtotime($startdate);
$newformat = date('d-m-Y',$mydate);
echo '<tr>';
echo ' <td data-sort="'. $mydate .'">'.$newformat .'</td>';
Utilisez l'attribut data-order sur la balise <td> comme suit ( Ruby Example ):
<td data order='<%=rentroll.decorate.date%>'><%=rentroll.decorate.date%></td>
Votre fonction de décorateur ici serait:
def date
object.date&.strftime("%d/%m/%Y")
end
La méthode la plus simple consiste à ajouter un horodatage masqué avant la date dans chaque balise TD de la colonne, par exemple:
<td class="sorting_1">
<span class="d-none">1547022615</span>09/01/2019 09:30
</td>
Avec l'ordre de chaîne par défaut, un horodatage ordonnerait la colonne comme vous le souhaitez et ne sera pas affiché lors du rendu dans le navigateur.
Moi aussi j'ai le même problème.
J'utilisais span avec dans td comme le 21/03/2017, ce qui a permis à datatable de traiter cela comme une chaîne et que le tri ne fonctionnait pas.
J'ai enlevé span à l'intérieur de td, et il a été corrigé ..__ comme, le 21/03/2017