Tablesorter插件的自定义解析器，用于自定义日期格式 [英] Custom Parser for Tablesorter plugin for custom date format
问题描述
我需要改编jQuery Tablesorter插件，以非常简单的格式对日期进行排序，该格式将由三个字母的月份和4位数字的日期组成(例如2010年5月，2011年1月，2012年3月等).
I need to adapt the jQuery Tablesorter plugin to sort dates in a very simple format which will consist of the three letter month and the 4 digit date (e.g. May 2010, Jan 2011, Mar 2012, etc).
我无法全神贯注于如何做.我尝试调整以下解析器: http://beausmith. com/blog/custom-date-sorting-for-jquery-tablesorter-plugin/.但是我迷上了reg ex.为方便起见，我将在下面发布他的代码.
I have'nt been able to wrap my head around how to do it. I tried adapting the parser found here: http://beausmith.com/blog/custom-date-sorting-for-jquery-tablesorter-plugin/. But I am lost with reg ex. For ease in helping, I will post his code below.
// TableSort parser for date format: Jan 6, 1978
$.tablesorter.addParser({
id: 'monthDayYear',
is: function(s) {
return false;
},
format: function(s) {
var date = s.match(/^(\w{3})[ ](\d{1,2}),[ ](\d{4})$/);
var m = monthNames[date[1]];
var d = String(date[2]);
if (d.length == 1) {d = "0" + d;}
var y = date[3];
return '' + y + m + d;
},
type: 'numeric'
});
var monthNames = {};
monthNames["Jan"] = "01";
monthNames["Feb"] = "02";
monthNames["Mar"] = "03";
monthNames["Apr"] = "04";
monthNames["May"] = "05";
monthNames["Jun"] = "06";
monthNames["Jul"] = "07";
monthNames["Aug"] = "08";
monthNames["Sep"] = "09";
monthNames["Oct"] = "10";
monthNames["Nov"] = "11";
monthNames["Dec"] = "12";
关于如何仅将其格式化为月份名称和年份的任何想法?谢谢！
Any ideas on how to just format it for month names and year? Thanks!
更新: 我试图从下面的Sam和Fudgey中实现一些代码(感谢您到目前为止提供的帮助！).我不能完全正常工作.我尝试使用fugey的代码示例，因为我在fiddle演示中看到了它在哪里完全按照需要工作.以下是我的HTML标记:
UPDATE: I have tried to implement some code both from Sam and Fudgey below (thank you for being so helpful thus far!). I can't quite get it to work. I tried to use fugey's code sample because I see where it is working exactly as needed on the fiddle demo. Below is my HTML markup:
<table id="myTable" class="stripeMe sample" width="100%" cellpadding="0" cellspacing="0">
<thead>
<th width="30%" align="left">COMPANY</th><th width="35%">DESCRIPTION</th><th width="17%" align="left">INDUSTRY</th><th width="18%" align="left">EXIT DATE</th></tr></thead>
<tbody>
<tr><td width="30%"> <a href="http://www.cartera.com/vesdia.html "> Cartera Commerce, Inc.</a> </td>
<td width="35%">Provides technology-enabled marketing and loyalty solutions
</td><td width="17%"> Financials </td><td width="18%">Feb 2010</td></tr><tr><td width="30%"> <a href="http://www.criticalinfonet.com/ "> Critical Information Network, LLC</a> </td>
<td width="35%">Operates library of industrial professional training and certification materials
</td><td width="17%"> Education </td><td width="18%">Apr 2011</td></tr><tr><td width="30%"> <a href="http://www.cynergydata.com/ "> Cynergydata</a> </td>
<td width="35%">Provides merchant payment processing services and related software products
</td><td width="17%"> Merchant Processing </td><td width="18%">May 2011</td></tr><tr> <td width="30%"> <a href=" "> EVCI Career Colleges Holding Corp</a> </td>
<td width="35%">Operates post-secondary schools
</td><td width="17%"> Education </td><td width="18%">Jul 2012</td></tr><tr><td width="30%"> <a href="http://www.groundlink.com/ "> Groundlink, Inc.</a> </td>
<td width="35%">Provides ground transportation services domestically and internationally
</td><td width="17%"> Transportation </td><td width="18%">Feb 2012</td></tr><tr><td width="30%"> <a href="http://www.haggen.com/ "> Haggen, Inc.</a> </td>
<td width="35%">Operates chain of high-end grocery stores in the Pacific Northwest
</td><td width="17%"> Grocery </td><td width="18%">Aug 2011 </td></tr>
</tbody>
</table>
然后是我正在使用的脚本，它是忽悠的，但是我将列标题号更改为3(这是表中的第4列)，并且我更改了对tablesorter的调用以使用表的ID，这种情况是永远原始的#myTable.我也将其包装在jQuery的$(document).ready:
And then the script I am using, which is fudgey's but I changed the column header number to 3 (it's the 4th column in my table) and I changed the call to the tablesorter to use the id of the table, which in this case is the ever original #myTable. I also wrapped it in jQuery's $(document).ready:
$(document).ready(function() {
$.tablesorter.addParser({
id: 'monthYear',
is: function(s) {
return false;
},
format: function(s) {
var date = s.match(/^(\w{3})[ ](\d{4})$/);
var m = date ? date[1] + ' 1 ' || '' : '';
var y = date && date[2] ? date[2] || '' : '';
return new Date(m + y).getTime() || '';
},
type: 'Numeric'
});
$('#myTable').tablesorter({
headers: {
3: {
sorter: 'monthYear'
}
}
});
});
它仍然没有按日期对列进行排序，我不确定它如何对它进行排序-我按此顺序进行了排序，这看起来似乎正确，但请看一下2010年2月的降级时间，就在中间的2011年日期-很奇怪: 2011年8月 2010年2月 2011年4月 2011年5月 2012年2月 2012年7月
And it is still not sorting that column by date, I'm not sure how it is sorting it - I get a sort in this order, which almost seems right but look at where that Feb 2010 falls, right in the middle of 2011 dates - weird: Aug 2011 Feb 2010 Apr 2011 May 2011 Feb 2012 Jul 2012
推荐答案
我修改了@SamTyson的答案:
I've modified @SamTyson's answer:
三件事发生了改变:
- format函数需要能够处理空表单元格.
- format函数必须返回字符串或数字
- 解析器类型只能是数字"或文本".
因此，我最终得到了这个解析器代码和此演示.
So, I ended up with this parser code and this demo.
$.tablesorter.addParser({
id: 'monthYear',
is: function(s) {
return false;
},
format: function(s) {
// remove extra spacing
s = $.trim(s.replace(/\s+/g, ' '));
// process date
var date = s.match(/^(\w{3})[ ](\d{4})$/),
m = date ? date[1] + ' 1 ' || '' : '',
y = date && date[2] ? date[2] || '' : '';
return new Date(m + y).getTime() || '';
},
type: 'Numeric'
});
$('table').tablesorter({
headers: {
0: {
sorter: 'monthYear'
}
}
});
更新:添加了一行以删去多余的空格.
Update: Added a line to trim out extra spaces.
这篇关于Tablesorter插件的自定义解析器，用于自定义日期格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
