jQueryのプラグイン「tablesorter」を使用して特殊な並び替えで困ってたメモ。
「特殊な並び替え」と記載したが、日本語では頻度の高い並び替えだと思う。
少し「tablesorter.js」に手を加えます。
準備するもの
・jQuery (1.2.1以上)
※tablesorterに付属されている「jquery-latest.js」でも可能です。
・
tablesorter.js
・jquery.metadata.js
やりたかった事
「名前（ふりがな）」での並び替え。
色々検索したが、
Ａ：「ふりがな」の項目を追加する。
Ｂ：「metadata」を使用する。
の２パターンがあった。
Ａは並び替え可能だが、横幅を取りたくなかったので却下。
Ｂは「北海道→1」、「沖縄→47」という都道府県コードみたいな感じの決まり事があれば可能だったが、
【文字列】を【数値】に変換されて並び替える処理だった為、「ひらがな」は全て「0」となり、出来なかった。
１：「tablesorter.js」のmetadataの処理をコピー
996行目～1005行目が「metadata」での処理。
ts.addParser({
id: "metadata",
is: function (s) {
return false;
}, format: function (s, table, cell) {
var c = table.config,
p = (!c.parserMetadataName) ? "sortValue" : c.parserMetadataName;
return $(cell).metadata()[p];
}, type: "numeric"
});
２：「１」を貼り付けて修正
1006行目辺りに貼り付けると分かり易いかも。
ts.addParser({
id: "metatext",
is: function (s) {
return false;
}, format: function (s, table, cell) {
var c = table.config,
p = (!c.parserMetatextName) ? "sortValue" : c.parserMetatextName;
return $(cell).metadata()[p];
}, type: "text"
});
※赤字が変更した箇所。
parserMetadataNameとかは別に変更しなくても問題無いけど、ソースに合わせた感じ。
３：HTMLファイル作成
<table class="tablesorter">
<thead>
<tr><th>No</th><th class="{sorter: 'metatext'}">名前</th><th>年齢</th></tr>
</thead>
<tbody>
<tr><td>1</td><td class="{sortValue: 'たろう'}">太朗</td><td>16</td></tr>
<tr><td>2</td><td class="{sortValue: 'はなこ'}">花子</td><td>11</td></tr>
<tr><td>3</td><td class="{sortValue: 'こうじ'}">晃司</td><td>64</td></tr>
<tr><td>4</td><td class="{sortValue: 'れいこ'}">礼子</td><td>48</td></tr>
<tr><td>5</td><td class="{sortValue: 'しんいち'}">真一</td><td>34</td></tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$(".tablesorter").tablesorter();
});
</script>
これで「名前」をクリックすると「ひらがな」で並び替えが可能になります。
【「よみがな」フィールドは付けたくないんだ！（横幅的な意味で）】と言う方はお試しあれ。
No.758 ひぐらし - 2016-08-12 18:35:05
とても参考になりました。
残念ながら投稿されたままでは動作しませんでした。投稿内容に加えて、
jqery.metadata.jsをjqeury.metatext.jsと別名保存して、jsソースコードの「metadata」を「metatext」に一括置換して、jquery.metadata.jsと同じように読み込むと動作しました。
ご報告まで。