2009-11-10 79 views
21

我想排序一个列有像2009-12-17 23:59:59.0列。 我使用下面的链接申请排序日期使用jquery tablesorter排序问题

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

但它不工作的格式YYYY-MM-DD的日期。 任何人都可以建议我如何应用这种格式进行排序?

+4

定义“不工作” - 它应该是如何工作的,它是如何呢? – 2009-11-10 13:11:23

+0

其工作正常的AlphaNumeric值,而不适用于格式为“yyyy-mm-dd”的日期 – CFUser 2009-11-10 13:25:19

回答

33

正确的做法是为此自定义格式添加自己的解析器。

选中此项可了解其工作原理。

jQuery Tablesorter: Add your own parser

然后看看到的tablesorter源(搜索uslongdate,shortdate,然后看如何对日期格式的解析器会在内部的tablesorter完成。现在构建你自己的类似解析器为特定的日期格式。

jquery.tablesorter.js

这应该根据自己的喜好

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

现在只需将其应用于具有此格式的列(例如,假设自定义日期驻留在在列号7中的柱(6表示第7列,这是因为列的阵列zerobased)

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

那么如果我已经动态地检索表,并且我不知道哪个列具有日期格式,在这种情况下有任何想法? – CFUser 2009-11-10 14:04:02

+2

检查修改后的代码。现在你可以放弃较低的代码片段,因为tablesorter应该自动地为你的列选择你的分类器。 – jitter 2009-11-10 14:35:06

+0

Thank You非常多抖动,它工作完美 – CFUser 2009-11-10 15:22:39

6

如果使用日期/时间格式等MM/DD/YYYY HH:MM然后用下面

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

排序英国/欧洲日期格式DD/MM/YYYY由:

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

不错,欢呼!他们错过了文档中的这一个! http://tablesorter.com/docs/#Configuration – Shawson 2012-04-13 09:25:43

+1

完美答案! – hugalves 2013-12-31 19:43:45

+1

对此的最佳答案。 – 2014-09-11 02:14:59

0

无需创建新的解析器只需使用现有的修改器即可。

1.打开jquery插件js,在这里你会看到下面的脚本。现在只需更改最后一个其他的日期格式(期望),如果你的情况是“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.现在按照抖动提到的最后一步,但稍加修改。

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

随着2.18.4最新的版本,你可以根本就喜欢this.Just给默认的日期格式,在特定列中设置列日期格式,这将只与'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 } 

       } 
      }); 
-1

只需要添加另外的选择,完全适用于我排序的日期格式(DD/MM/YYYY HH:mm:ss的)。 通过使用js dataTables插件。

添加下面的代码到你的代码:

$(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; 
} 
}); 
相关问题