web-dev-qa-db-fra.com

Comment trier par date avec DataTables jquery plugin?

J'utilise le plugin JQery datatables et je veux trier par dates.

Je sais qu'ils ont un plugin mais je ne trouve pas où le télécharger.

http://datatables.net/plug-ins/sorting

Je crois que j'ai besoin de ce fichier: dataTables.numericComma.js mais je ne le trouve nulle part et lorsque je télécharge des données, il ne semble pas être dans le fichier Zip.

Je ne sais pas non plus si je dois créer mon propre trieur de dates personnalisé pour le transférer dans ce plugin.

J'essaie de trier ce format MM/JJ/AAAA HH: MM TT (AM | PM)

Merci

Modifier

Comment puis-je changer ceci pour trier par MM/JJ/AAAA HH: MM TT (AM | PM) et le changer en date U.S?

jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};
jqueryjquery-pluginsdatatables
44
chobo2

Cliquez sur le lien "Afficher les détails" sous Date (jj/mm/AAAA) , vous pourrez alors copier et coller le code de plug-in fourni à cet emplacement. 

Mise à jour: Je pense que vous pouvez simplement changer l'ordre du tableau, comme suit:

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) {
    var usDatea = a.split('/');
    var usDateb = b.split('/');

    var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
    var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
    var usDatea = a.split('/');
    var usDateb = b.split('/');

    var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
    var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

Tout ce que j'ai fait est de changer le __date_[1] (jour) et le __date_[0] (mois) et de remplacer uk par us pour ne pas vous embrouiller. Je pense que cela devrait en prendre soin pour vous.

Mise à jour # 2: Vous devriez pouvoir simplement utiliser l'objet de date pour la comparaison. Essaye ça:

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) {
 var x = new Date(a),
     y = new Date(b);
 return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
 var x = new Date(a),
     y = new Date(b);
 return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};
17
Mottie

Tri par date - avec un élément caché

Convertissez la date au formatAAAAMMJJet ajoutez la valeur réelle ( MM/JJ/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>MM/DD/YYYY</td>
   </tr>
</table>

CSS 

#data-table span {
    display:none; 
}
123
Anulal S

Vous devriez utiliser les attributs de données HTML5.https://www.datatables.net/examples/advanced_init/html5-data-attributes.html

Ajoutez simplement l’élément data-order à votre élément td.
Aucun plugin requis.

<table class="table" id="exampleTable">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Sign Up Date</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>Peter</td>
            <td data-order="2015-11-13 12:00">13. November 2015</td>
        </tr>
        <tr>
            <td>Daniel</td>
            <td data-order="2015-08-06 13:44">06. August 2015</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td data-order="2015-10-14 16:12">14. October 2015</td>
        </tr>
    </tbody>
</table>


<script>
    $(document).ready(function() {
        $('#exampleTable').DataTable();
    });
</script>
92
RenRen

Je me rends compte que c'est une question vieille de deux ans, mais je la trouvais toujours utile. J'ai fini par utiliser l'exemple de code fourni par Fudgey mais avec un mod mineur. M'a fait gagner du temps, merci!

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) { 
  var x = new Date($(a).text()),
  y = new Date($(b).text());
  return ((x < y) ? -1 : ((x > y) ?  1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) { 
  var x = new Date($(a).text()),
  y = new Date($(b).text());
  return ((x < y) ? 1 : ((x > y) ?  -1 : 0)); 
};
10
Kevin

Depuis 2015, le moyen le plus pratique selon moi de trier la colonne Date dans un DataTable consiste à utiliser le plugin de tri required . Comme le format de date dans mon cas était dd/mm/yyyy hh:mm:ss, j'ai fini par utiliser le plugin date-euro . Il suffit de:

Étape 1: Incluez le plugin de tri fichier JavaScript ou code et;

Étape 2: Ajoutez columnDefs comme indiqué ci-dessous pour cibler la ou les colonnes appropriées.

$('#example').dataTable( {
    columnDefs: [
       { type: 'date-euro', targets: 0 }
    ]
});
5
Vikram Deshmukh

Les fichiers de données ne peuvent être commandés que par DateTime au format "ISO-8601" . Vous devez donc convertir votre date au format "date-order" (par exemple, avec Razor):

<td data-sort="@myDate.ToString("o")">@myDate.ToShortDateString() - @myDate.ToShortTimeString()</td>
4
Dani

Juste au cas où quelqu'un aurait du mal à créer des espaces vides, que ce soit dans les valeurs de date ou dans les cellules, vous devrez gérer ces bits. Parfois, un espace vide n’est pas géré par la fonction trim venant de HTML, il ressemble à "$ nbsp;". Si vous ne les manipulez pas, votre tri ne fonctionnera pas correctement et se cassera s'il y a un espace vide. 

J'ai reçu ce morceau de code d'extensions jquery ici aussi et je l'ai un peu modifié pour répondre à mes besoins. Tu devrais faire la même chose!

function trim(str) {
    str = str.replace(/^\s+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
        if (/\S/.test(str.charAt(i))) {
            str = str.substring(0, i + 1);
            break;
        }
    }
    return str;
}

jQuery.fn.dataTableExt.oSort['uk-date-time-asc'] = function(a, b) {
    if (trim(a) != '' && a!="&nbsp;") {
        if (a.indexOf(' ') == -1) {
            var frDatea = trim(a).split(' ');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
        }
        else {
            var frDatea = trim(a).split(' ');
            var frTimea = frDatea[1].split(':');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
        }
    } else {
        var x = 10000000; // = l'an 1000 ...
    }

    if (trim(b) != '' && b!="&nbsp;") {
        if (b.indexOf(' ') == -1) {
            var frDateb = trim(b).split(' ');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
        }
        else {
            var frDateb = trim(b).split(' ');
            var frTimeb = frDateb[1].split(':');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
        }
    } else {
        var y = 10000000;
    }
    var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
    return z;
};

jQuery.fn.dataTableExt.oSort['uk-date-time-desc'] = function(a, b) {
    if (trim(a) != '' && a!="&nbsp;") {
        if (a.indexOf(' ') == -1) {
            var frDatea = trim(a).split(' ');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
        }
        else {
            var frDatea = trim(a).split(' ');
            var frTimea = frDatea[1].split(':');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
        }
    } else {
        var x = 10000000;
    }

    if (trim(b) != '' && b!="&nbsp;") {
        if (b.indexOf(' ') == -1) {
            var frDateb = trim(b).split(' ');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
        }
        else {
            var frDateb = trim(b).split(' ');
            var frTimeb = frDateb[1].split(':');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
        }
    } else {
        var y = 10000000;
    }

    var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
    return z;
};
3
Hali

A propos de la mise à jour # 1, il y a 2 problèmes: 

  • Nombre de jours = 1 (j/MM/AAAA) au lieu de (jj/MM/AAAA)
  • Date vide

voici la solution pour éviter ces problèmes: 

jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function (a, b) {
            var ukDatea = a.split('/');
            var ukDateb = b.split('/');

            //Date empty
             if (ukDatea[0] == "" || ukDateb[0] == "") return 1;

            //need to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) 
            if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; 
            if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];

            var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        };

        //Sorting by Date 
        jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function (a, b) {
            var ukDatea = a.split('/');
            var ukDateb = b.split('/');

             //Date empty
             if (ukDatea[0] == "" || ukDateb[0] == "") return 1;

            //MANDATORY to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) 
            if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; 
            if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];

            var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

            return ((x < y) ? 1 : ((x > y) ? -1 : 0));
        };
2
Giu

Créez une colonne masquée "dateOrder" (par exemple) avec la date sous forme de chaîne au format "aaaaMMjjHHmmss" et utilisez la propriété "orderData" pour désigner cette colonne.

var myTable = $("#myTable").dataTable({
 columns: [
      { data: "id" },
      { data: "date", "orderData": 4 },
      { data: "name" },
      { data: "total" },
      { data: "dateOrder", visible: false }
 ] });
0
Duefectu

J'ai eu la solution après avoir travaillé toute la journée dessus. C'est une petite solution de hacky Ajouté span à l'intérieur du tag td 

<td><span><%= item.StartICDate %></span></td>.

Le format de date utilisé est le jj/mm/aaaa. Testé dans Datatables1.9.0 

0
Shanmugapriyan