爲自定義日期格式的Tablesorter插件定製解析器

Question

我需要修改jQuery Tablesorter插件以非常簡單的格式對日期進行排序，該格式包含三個字母的月份和4位數的日期（例如2010年1月，2011年1月，3月2012等）。

我一直無法圍繞如何做到這一點。我試着修改這裏發現的解析器：http://beausmith.com/blog/custom-date-sorting-for-jquery-tablesorter-plugin/。但我失去了與reg前。爲了便於幫助，我將在下面發佈他的代碼。

// 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"; 

關於如何格式化月份名稱和年份的任何想法？謝謝！

更新： 我試圖從Sam和Fudgey下面實現一些代碼（謝謝你到目前爲止這麼有幫助！）。我無法完成它的工作。我試圖使用fugey的代碼示例，因爲我看到它在小提琴演示中的確切位置。下面是我的HTML標記：

<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> 

然後我使用的腳本，這是fudgey的，但我改變了列頭數爲3（這是我的表中的第4列），我改變了調用的tablesorter使用表格的ID，在這種情況下，它是原始的#myTable。我還包裹在jQuery的$（文件）。就緒：

$(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月

Answer 1

我修改@ SamTyson的回答是：

有跡象表明，改變了三兩件事：

1. 格式功能需要能夠處理空表格單元格。
2. 格式函數必須返回一個字符串或數字
3. 解析器類型只能是「數字」或「文本」。

所以，我結束了這個解析器代碼和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' 
     } 
    } 
}); 

更新：添加了一行來裁剪出多餘的空格。

Answer 2

隨着合式日期，這應該是你的答案：

$.tablesorter.addParser({ 
    id: 'monthYear', 
    is: function(s) { 
     return false; 
    }, 
    format: function(s) { 
     var date = s.match(/^(\w{3})[ ](\d{4})$/); 
     var m = date[1]; 
     var y = date[2]; 
     return new Date(m + ' ' + 1 + ' ' + y); 
    }, 
    type: 'date' 
}); 

$(document).ready(function() { 
    $('.tablesorter').tablesorter({ 
     headers: { 
     1: { 
      sorter: 'monthYear' 
     } 
     } 
    }); 
}); 

它使用正則表達式來提取月份縮寫和年份，然後將它們轉換爲排序日期。