5

jQuery Tablesorter プラグインを調整して、3 文字の月と 4 桁の日付 (2010 年 5 月、2011 年 1 月、2012 年 3 月など) で構成される非常に単純な形式で日付を並べ替える必要があります。

私はそれを行う方法について頭を包むことができませんでした。ここにあるパーサーを調整してみました: http://beausmith.com/blog/custom-date-sorting-for-jquery-tablesorter-plugin/。しかし、私は正規表現で迷っています。簡単に支援できるように、彼のコードを以下に掲載します。

// TableSort parser for date format: Jan 6, 1978
$.tablesorter.addParser({
id: 'monthDayYear',
is: function(s) {
  return false;
},
format: function(s) {
  var date = s.match(/^(\w{3})[ ](\d{1,2}),[ ](\d{4})$/);
  var m = monthNames[date[1]];
  var d = String(date[2]);
  if (d.length == 1) {d = "0" + d;}
  var y = date[3];
  return '' + y + m + d;
 },
type: 'numeric'
});
var monthNames = {};
monthNames["Jan"] = "01";
monthNames["Feb"] = "02";
monthNames["Mar"] = "03";
monthNames["Apr"] = "04";
monthNames["May"] = "05";
monthNames["Jun"] = "06";
monthNames["Jul"] = "07";
monthNames["Aug"] = "08";
monthNames["Sep"] = "09";
monthNames["Oct"] = "10";
monthNames["Nov"] = "11";
monthNames["Dec"] = "12";

月名と年をフォーマットする方法についてのアイデアはありますか? ありがとう！

更新: 以下の Sam と Fudgey の両方からいくつかのコードを実装しようとしました (これまでとても役に立ってくれてありがとう!)。私はそれをうまく機能させることができません。fugey のコード サンプルを使用しようとしたのは、fiddle デモで必要に応じて正確に動作している場所がわかったからです。以下は私のHTMLマークアップです：

<table id="myTable" class="stripeMe sample" width="100%" cellpadding="0"    cellspacing="0">
<thead>
<th width="30%" align="left">COMPANY</th><th width="35%">DESCRIPTION</th><th width="17%"   align="left">INDUSTRY</th><th width="18%" align="left">EXIT DATE</th></tr></thead>
<tbody>
<tr><td width="30%">   <a href="http://www.cartera.com/vesdia.html "> Cartera Commerce,  Inc.</a>  </td>
<td width="35%">Provides technology-enabled marketing and loyalty solutions 
</td><td width="17%">   Financials  </td><td width="18%">Feb 2010</td></tr><tr><td  width="30%">   <a href="http://www.criticalinfonet.com/ "> Critical Information Network,   LLC</a>  </td>
<td width="35%">Operates library of industrial professional training and certification   materials 
</td><td width="17%">   Education  </td><td width="18%">Apr 2011</td></tr><tr><td     width="30%">   <a href="http://www.cynergydata.com/ "> Cynergydata</a>  </td>
<td width="35%">Provides merchant payment processing services and related software products 
</td><td width="17%">   Merchant Processing  </td><td width="18%">May 2011</td></tr><tr>  <td width="30%">   <a href=" "> EVCI Career Colleges Holding Corp</a>  </td>
<td width="35%">Operates post-secondary schools  
</td><td width="17%">   Education  </td><td width="18%">Jul 2012</td></tr><tr><td  width="30%">   <a href="http://www.groundlink.com/ "> Groundlink, Inc.</a>  </td>
<td width="35%">Provides ground transportation services domestically and internationally 
</td><td width="17%">   Transportation  </td><td width="18%">Feb 2012</td></tr><tr><td  width="30%">   <a href="http://www.haggen.com/ "> Haggen, Inc.</a>  </td>
<td width="35%">Operates chain of high-end grocery stores in the Pacific Northwest 
</td><td width="17%">   Grocery  </td><td width="18%">Aug 2011 </td></tr>

</tbody>
</table>

そして、私が使用しているスクリプトは fudgey ですが、列ヘッダー番号を 3 に変更し (テーブルの 4 番目の列です)、テーブルの id を使用するように tablesorter への呼び出しを変更しました。この場合はオリジナルの #myTable。また、jQuery の $(document).ready でラップしました。

$(document).ready(function() { 
$.tablesorter.addParser({
id: 'monthYear',
is: function(s) {
return false;
},
format: function(s) {
var date = s.match(/^(\w{3})[ ](\d{4})$/);
var m = date ? date[1] + ' 1 ' || '' : '';
var y = date && date[2] ? date[2] || '' : '';
return new Date(m + y).getTime() || '';
},
type: 'Numeric'
});

$('#myTable').tablesorter({
headers: {
    3: {
        sorter: 'monthYear'
    }
}
});
});

そして、その列はまだ日付でソートされていません。どのようにソートされているのかわかりません。この順序でソートされます。これはほとんど正しいように見えますが、2010 年 2 月が 2011 年の日付の真ん中にある場所を見てください。 - 奇妙な: 2011 年 8 月 2010 年 2 月 2011 年 4 月 2011 年 5 月 2012 年 2 月 2012 年 7 月

4

2 に答える 2

2

@SamTysonの回答を変更しました：

変更された点は次の 3 点です。

  1. format 関数は、空のテーブル セルを処理できる必要があります。
  2. format 関数は文字列または数値を返す必要があります
  3. パーサー タイプは「数値」または「テキスト」のみです。

それで、私はこのパーサーコードとこのデモにたどり着きました。

$.tablesorter.addParser({
    id: 'monthYear',
    is: function(s) {
        return false;
    },
    format: function(s) {
        // remove extra spacing
        s = $.trim(s.replace(/\s+/g, ' '));
        // process date
        var date = s.match(/^(\w{3})[ ](\d{4})$/),
            m = date ? date[1] + ' 1 ' || '' : '',
            y = date && date[2] ? date[2] || '' : '';
        return new Date(m + y).getTime() || '';
    },
    type: 'Numeric'
});

$('table').tablesorter({
    headers: {
        0: {
            sorter: 'monthYear'
        }
    }
});

更新: 余分なスペースを削除する行を追加しました。

于 2012-05-10T04:07:55.123 に答える
2

整形式の日付を使用すると、次のようになります。

$.tablesorter.addParser({
    id: 'monthYear',
    is: function(s) {
        return false;
    },
    format: function(s) {
        var date = s.match(/^(\w{3})[ ](\d{4})$/);
        var m = date[1];
        var y = date[2];
        return new Date(m + ' ' + 1 + ' ' + y);
    },
    type: 'date'
});

$(document).ready(function() {
    $('.tablesorter').tablesorter({
      headers: {
         1: {
            sorter: 'monthYear'
         }
      }
   });
});

正規表現を使用して月の省略形と年を抽出し、並べ替えのために日付に変換します。

于 2012-05-08T16:02:33.293 に答える