javascript - jQuery Tablesorter - 日付フィールドをソートしません

Question

jQueryテーブルソーターを使用してテーブルをソートしています。日付フィールドを持つ列を除くすべての列をソートします。日付はSep 3, 2012 この形式です。この問題を解決するには？

サンプルの日付:

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

Answer 1

のように、テーブルのセル属性からデータを抽出できるパーサーを作成できるテーブルソーターのフォークがありますdata-attribute。

この例では、さまざまな形式の誕生日の列があり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>

パーサー- このパーサー コードは、この変更されたバージョンの 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'] 
  }); 

});