如何使用格式为 'dd/mm/yyyy - dd/mm/yyyy' 的 jquery tablesorter 对日期进行排序

Question

我的日期是 dd/mm/yyyy - dd/mm/yyyy 格式。如何使用 jquery tablesorter 对其进行排序。我尝试使用 sorter:"shortDate" 和 dateFormat:'ddmmyyyy' 对其进行排序，但它没有按正确的顺序对其进行排序。

<table>
<thead> 
    <tr><th>Date</th></tr>
</thead> 
<tbody>
<tr class="reportcell  odd ">
    <td>
        <div class="time">28/04/2014 - 11/07/2014</div>
    </td>
</tr>
<tr>
    <td>
        <div class="time">28/04/2014 - 13/05/2014</div>
    </td>
</tr>
<tr>
    <td>
        <div class="time">22/07/2014 - 22/07/2014</div>
    </td>
</tr>
<tr>
    <td>
        <div class="time">22/05/2014 - 22/05/2014</div>
    </td>
</tr>
</tbody>

Answer 1

您需要制作一个自定义解析器才能对列进行排序。此解析器存在问题，因为很难使其与过滤器小部件 (demo) 一起正常工作：

$(function() {

    $.tablesorter.addParser({
        id: "date-range",
        is: function(){
            return false;
        },
        format: function(s, table, cell) {
            var dates = s.replace(/(\d{1,2})[\/\s](\d{1,2})[\/\s](\d{4})/g, "$2/$1/$3").split(' - '),
                parsed = [];
            if (dates.length) {
                $.each(dates, function(i,d){
                    var v = new Date(d);
                    parsed.push($.type(v) === 'date' ? v.getTime() : d);
                });
            }
            return parsed.length ? parsed.join('') : s;
        },
        parsed : true,
        type: "text"
    });

    // call the tablesorter plugin
    $("table").tablesorter({
        headers : {
            0 : { sorter: 'date-range' }
        }
    });

});

---

更新（来自 cmets 的问题）：

格式化函数代码如下：

• 通过将日期从“dd/mm/yyyy”更改为“mm/dd/yyyy”来修改日期，以便日期解析器（new Date() 将识别所需的日期设置）
• split(' - ') 拆分日期范围并根据范围字符串在数组中创建两个日期。
• dates.length 确保我们有一个包含内容的数组
• $.each() 循环遍历每个日期字符串
  • 它从字符串创建一个数据对象
  • 然后将其作为以毫秒为单位的日期或原始字符串（如果它不是有效日期）添加到新数组中
• 如果没有日期范围，则返回连接在一起的新数组（以毫秒为单位的两个日期的时间）或原始字符串。

因此，此方法不适用于过滤器小部件的原因是因为日期被组合（作为字符串，未添加）以允许对解析的日期进行正确排序。此外，通过写出此描述，我意识到具有单个日期的单元格不会被解析为以毫秒为单位的时间，而是作为原始日期字符串返回。无论哪种方式，非日期范围单元格都会与日期范围单元格分开排序。