2009-11-10 101 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; 
} 
});