Question

Je suis en train de trier une table qui a comme colonne 2009-12-17 23:59:59.0. J'utilise ci-dessous pour appliquer sorte

$(document).ready(function() 
        { 
            $("#dataTable").tablesorter();  
        } 
    );

Mais sa ne fonctionne pas pour les dates de format aaaa-mm-jj. Peut-on suggérer comment puis-je appliquer ce format pour le tri?

Était-ce utile?

La solution

La bonne chose à faire serait d'ajouter votre propre analyseur pour ce format personnalisé.

Cochez cette case pour obtenir une prise sur la façon dont cela fonctionne.

jQuery tablesorter: Ajoutez votre propre analyseur

Alors jetez un coup d'oeil dans la source tablesorter (recherche de uslongdate, shortdate puis regarder comment les parseurs pour les formats de date sont en interne faites par tablesorter. Maintenant, construire votre auto un analyseur similaire pour votre format de date.

jquery.tablesorter.js

Cela devrait fonctionner à votre goût

ts.addParser({
    id: "customDate",
    is: function(s) {
        //return false;
        //use the above line if you don't want table sorter to auto detected this parser
        //else use the below line.
        //attention: doesn't check for invalid stuff
        //2009-77-77 77:77:77.0 would also be matched
        //if that doesn't suit you alter the regex to be more restrictive
        return /\d{1,4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}\.\d+/.test(s);
    },
    format: function(s) {
        s = s.replace(/\-/g," ");
        s = s.replace(/:/g," ");
        s = s.replace(/\./g," ");
        s = s.split(" ");
        return $.tablesorter.formatFloat(new Date(s[0], s[1]-1, s[2], s[3], s[4], s[5]).getTime()+parseInt(s[6]));
    },
    type: "numeric"
});

Maintenant, il suffit d'appliquer à la colonne où vous avez ce format (par exemple en supposant que la colonne dates personnalisées résident dans la colonne sont n ° 7. (6 signifie que la colonne 7, car le tableau des colonnes est zerobased)

$(function() {
    $("table").tablesorter({
        headers: {
            6: { sorter:'customDate' }
        }
    });
});

Autres conseils

Trier par UK / format de date européenne jj / mm / aaaa:

$("#tableName").tablesorter({dateFormat: "uk"});

Si vous utilisez le format date / heure comme mm / jj / aaaa hh: mm puis utilisez ci-dessous

$.tablesorter.addParser({ 
        id: "customDate",
        is: function(s) {
            //return false;
            //use the above line if you don't want table sorter to auto detected this parser                        
            //21/04/2010 03:54 is the used date/time format 
            return /\d{1,2}\/\d{1,2}\/\d{1,4} \d{1,2}:\d{1,2}/.test(s);
        },
        format: function(s) {
            s = s.replace(/\-/g," ");
            s = s.replace(/:/g," ");
            s = s.replace(/\./g," ");
            s = s.replace(/\//g," ");
            s = s.split(" ");                       
            return $.tablesorter.formatFloat(new Date(s[2], s[1]-1, s[0], s[3], s[4]).getTime());                                         
        },
        type: "numeric"} );

Avec la dernière version 2.18.4, vous pouvez simplement faire comme this.Just donner le format de date par défaut et dans la colonne particulière régler le format de la date de la colonne que cela fonctionne UNIQUEMENT avec trieuse « shortDate ».

$('YourTable').tablesorter(
            {
                dateFormat:'mmddYYYY',
                headers: {
                    0: { sorter: false },
                    1: { sorter: true},
                    2: { sorter: true },
                    3: { sorter: true },
                    4: { sorter: "shortDate", dateFormat: "ddmmyyyy" },
                    5: { sorter: true },
                    6: { sorter: false },
                    7: { sorter: false },
                    8: { sorter: false },
                    9: { sorter: false },
                    10: { sorter: false },
                    11: { sorter: false }

                }
            });

Pas besoin de créer un nouveau parser il suffit d'utiliser l'un exisitng avec peu de modifications.
1. Ouvrir js plugin Jquery, où vous verrez le ci-dessous script.Now il suffit de changer le dernier sinon le format de la date (souhaitée) si, dans votre cas, il est "aa-mm-dd".

    ts.addParser({
    id: "shortDate",
    is: function (s) {
        return /\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/.test(s);
    }, format: function (s, table) {
        var c = table.config;
        s = s.replace(/\-/g, "/");
        if (c.dateFormat == "us") {
            // reformat the string in ISO format
            s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$1/$2");
        } else if (c.dateFormat == "uk") {
            // reformat the string in ISO format
            s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
        } else if (c.dateFormat == "yy-mm-dd" || c.dateFormat == "dd-mm-yy") {
            s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/, "$1/$2/$3");
        }
        return $.tablesorter.formatFloat(new Date(s).getTime());
    }, type: "numeric"
});



2. Suivez maintenant la dernière étape mentionnée par la gigue, mais avec peu de modifications.

$(function() {
$("table").tablesorter({
    headers: {
        6: { sorter:'shortDate' }
    }
});
});

dateFormat: "mmjjaaaa", // définir le format de date par défaut

exemple-option de format date

Il suffit d'ajouter un autre choix fonctionne parfaitement pour moi de trier le format de date ( jj / mm / aaaa hh: mm: ss ). En utilisant le plugin js datatables .

Ajoutez le code ci-dessous à votre est le code:

$(document).ready(function () {
oTable = $('#AjaxGrid').dataTable({
"aLengthMenu": [[5, 10, 25, 50, 100, 500,1000,-1], [5, 10, 25, 50, 100,500,1000,"All"]],
iDisplayLength: 1000,
aaSorting: [[2, 'asc']],
bSortable: true,
aoColumnDefs: [
{ "aTargets": [ 1 ], "bSortable": true },
{ "aTargets": [ 2 ], "bSortable": true },
{ "aTargets": [ 3 ], "bSortable": true },
{ "aTargets": [ 4 ], "bSortable": true },
{"aTargets": [ 5 ], "bSortable": true, "sType": "date-euro"},
{"aTargets": [ 6 ], "bSortable": true, "sType": "date-euro"},
{ "aTargets": [ 7 ], "bSortable": false }
],
"sDom": '<"H"Cfr>t<"F"ip>',
"oLanguage": {
"sZeroRecords": "- No Articles To Display -",
"sLengthMenu": "Display _MENU_ records per page",
"sInfo": " ", //"Displaying _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": " ", //"Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)"
},
"bJQueryUI": true
});
});


//New code
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-euro-pre": function ( a ) {
if ($.trim(a) != '') {
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 = 10000000000000; // = l'an 1000 ...
}

return x;
},

"date-euro-asc": function ( a, b ) {
return a - b;
},

"date-euro-desc": function ( a, b ) {
return b - a;
}
} );
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top