2

我想要一个TD包含更多信息的信息，而不仅仅是其中的日期，但这会混淆比较。有没有办法指定一个类来给出比较要查找的日期？在此示例中，如果我尝试对前 2 个日期进行排序，它可以正常工作，但由于“事件信息”字符串，第三个日期将无法正常工作。我可以在不创建新表数据的情况下将两者分开吗？

Javascript

$(function() {
  $("table").tablesorter({
    widthFixed : true,
    widgets: ["filter"],
    widgetOptions : {
      filter_formatter : {
        0 : function($cell, indx){
          return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
            dateFormat : 'M dd, yy',
            changeMonth : true,
            changeYear : true,
            compare : '='
          });
        }
      }
    }
  });
});

HTML

<table class="tablesorter">
  <thead>
    <tr>
      <th data-placeholder="Sort By Date">Date (one input; greater than)</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Jun 26, 2013</td></tr>
    <tr><td>Aug 21, 2013</td></tr>
    <tr><td><span class="compareDate">Oct 13, 2013</span><div class="info">Event Information</div></td></tr>
    <tr><td>Jul 6, 2013</td></tr>
    <tr><td>Dec 10, 2012</td></tr>
  </tbody>
</table>

我发现你可以使用类似于下面代码的旧版本的插件，但我不确定如何在当前版本的插件中实现它。

{filterContainer: $("#container"), filterColumns: [3], filterCaseSensitive: false, filterCellProcessor: function(node) { return $(node).find("span.datefilter").text();}, filterFunction: filterByDate}
4

1 回答 1

1

我相信您可以在排序器初始化期间使用自定义 textExtraction 属性来隔离那些具有附加标记的单元格的日期：

http://tablesorter.com/docs/example-option-text-extraction.html

这样的事情应该可以解决问题：

textExtraction: function(node) { 
  return (node.childNodes[0].childNodes.length > 0) ? 
    node.childNodes[0].innerText : 
    node.innerText ;
}

这是一个小提琴，演示了将它与不同级别的内部单元格标记一起使用：

http://jsfiddle.net/NetsydeMiro/hkLdh/

它包括处理您问题中的两种日期格式（原版和带有以下 div 的跨度），但如果您预期更多类型的标记（例如您提到的下拉菜单和文本输入），可能需要对节点解析进行一些更改。我认为您只需要考虑任何预期的标记格式和/或回退到合理的默认值。

于 2013-09-10T16:37:36.353 回答