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

时间:2014-07-28 07:32:13

标签: jquery tablesorter

我的日期是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>

1 个答案:

答案 0 :(得分:0)

您需要创建自定义解析器才能对列进行排序。此解析器存在一个问题,因为使用过滤器小部件(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' }
        }
    });

});

更新(评论中的问题):

格式化功能代码执行以下操作:

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

因此,此方法无法使用过滤器窗口小部件的原因是因为日期被组合(作为字符串,未添加)以允许正确排序已分析的日期。此外,从编写此描述开始,我意识到具有单个日期的单元格不会被解析为以毫秒为单位的时间,而是作为原始日期字符串返回。无论哪种方式,非日期范围单元格将与日期范围单元格分开。