Question

我正在使用jQuery表分类器对表进行排序。它对除了具有日期字段的列之外的所有列进行排序。日期有Sep 3, 2012这种格式。如何解决这个问题？

样本日期：

2012年9月3日
2012年8月9日
2012年6月25日

Answer 1

我有一个tablesorter的分支，允许你编写一个可以从表格单元属性中提取数据的解析器，比如data-attribute。

在this example我有一个生日列，其格式不同，但单元格的data-date属性是一致的。

<table> 
<thead> 
  <tr> 
    <th>Name (Last)</th> 
    <th>Originally from...</th> 
    <th>Birthday</th> 
  </tr> 
</thead> 
  <tbody> 
    <tr> 
      <td data-lastname="Allen">Joe Allen</td> 
      <td>South Carolina</td> 
      <td data-date="01-15">Jan 15</td> 
    </tr> 
    <tr> 
      <td data-lastname="Torres">Lisa Torres</td> 
      <td>Maryland</td> 
      <td data-date="03-02">March 2nd</td> <!-- leading zeros needed to sort properly! --> 
    </tr> 
    <tr> 
      <td data-lastname="Franklin">Peter Louis Franklin</td> 
      <td>Coventry</td> 
      <td data-date="12-26">Boxing Day (Dec 26th)</td> 
    </tr> 
    <tr> 
      <td data-lastname="Jones">Maria Consuela de Los Angeles Ortiz Del Toro-Jones</td> 
      <td>Texas</td> 
      <td data-date="05-10">10 Mayo</td> 
    </tr> 
    <tr> 
      <td data-lastname="Bigglesworth">Mike "the Smasher" Bigglesworth</td> 
      <td>Rhode Island</td> 
      <td data-date="06-22">22nd of June</td> 
    </tr> 
    <tr> 
      <td data-lastname="Smith">Fredrick Smith</td> 
      <td>Ohio</td> 
      <td data-date="03-10">10th Mar</td> 
    </tr> 
  </tbody> 
</table>

解析器 - 请注意，此解析器代码仅适用于this modified version of tablesorter

// add parser through the tablesorter addParser method 
$(function(){ 

  $.tablesorter.addParser({ 
    // set a unique id 
    id: 'data', 
    is: function(s) { 
      // return false so this parser is not auto detected 
      return false; 
    }, 
    format: function(s, table, cell, cellIndex) { 
      var $cell = $(cell); 
      // I could have used $(cell).data(), then we get back an object which contains both 
      // data-lastname & data-date; but I wanted to make this demo a bit more straight-forward 
      // and easier to understand. 

      // first column (zero-based index) has lastname data attribute 
      if (cellIndex === 0) { 
        // returns lastname data-attribute, or cell text (s) if it doesn't exist 
        return $cell.attr('data-lastname') || s; 

      // third column has date data attribute 
      } else if (cellIndex === 2) { 
        // return "mm-dd" that way we don't need to use "new Date()" to process it 
        return $cell.attr('data-date') || s; 
      } 

      // return cell text, just in case 
      return s; 
    }, 
    // set type, either numeric or text 
    type: 'text' 
  }); 

  $('table').tablesorter({ 
    headers : { 
      0 : { sorter: 'data' }, 
      2 : { sorter: 'data' } 
    }, 
    widgets: ['zebra'] 
  }); 

});

jQuery Tablesorter - 不对日期字段进行排序

1 个答案: