date Tri problème avec Jquery Tablesorter

Question

J'essaie de trier une table qui a une colonne comme 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. Quelqu'un peut-il suggérer comment puis-je appliquer ce format pour le tri?

Answer 1

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

Cochez cette option pour comprendre comment cela fonctionne.

jQuery Tablesorter: Add your own parser

Ensuite, jetez un coup d'oeil dans la source tablesorter (recherche 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 particulière .

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 de l'appliquer à la colonne où vous avez ce format (par ex. en supposant que la colonne dates personnalisées résident dans sont dans la colonne n ° 7. (6 signifie que la colonne 7, car le tableau des colonnes est zerobased)

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

Answer 2

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

Answer 3

Trier Royaume-Uni/format de date européenne jj/mm/aaaa par:

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

Answer 4

Pas besoin de créer un nouveau analyseur il suffit d'utiliser l'existant avec peu de modifications.

1. Ouvrez le plugin jquery js, où vous verrez le script ci-dessous.Maintenant, changez simplement le format de date (désiré) pour le dernier cas si dans votre cas c'est "yy-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. suivre maintenant la dernière étape mentionnée par la gigue, mais avec peu de modifications.

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

Answer 5

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

example-option-date-format

Answer 6

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, définissez le format de date de la colonne, cela fonctionnera UNIQUEMENT avec un trieur '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 } 

       } 
      }); 

Answer 7

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