[スポンサードリンク]
2016-04-25 15:51:08
tablesorterの並び替え(ひらがな)方法
  1. jQuery
  2. tablesorter
jQueryのプラグイン「tablesorter」を使用して特殊な並び替えで困ってたメモ。
「特殊な並び替え」と記載したが、日本語では頻度の高い並び替えだと思う。
少し「tablesorter.js」に手を加えます。


準備するもの

・jQuery (1.2.1以上)
 ※tablesorterに付属されている「jquery-latest.js」でも可能です。
tablesorter.js
・jquery.metadata.js

やりたかった事

「名前(ふりがな)」での並び替え。
色々検索したが、
A:「ふりがな」の項目を追加する。
B:「metadata」を使用する。
の2パターンがあった。

Aは並び替え可能だが、横幅を取りたくなかったので却下。
Bは「北海道→1」、「沖縄→47」という都道府県コードみたいな感じの決まり事があれば可能だったが、
【文字列】を【数値】に変換されて並び替える処理だった為、「ひらがな」は全て「0」となり、出来なかった。

1:「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"
});

2:「1」を貼り付けて修正

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とかは別に変更しなくても問題無いけど、ソースに合わせた感じ。

3:HTMLファイル作成


これで「名前」をクリックすると「ひらがな」で並び替えが可能になります。
【「よみがな」フィールドは付けたくないんだ!(横幅的な意味で)】と言う方はお試しあれ。

【関連記事】

[スポンサードリンク]
コメントする


コメント
No.758 ひぐらし - 2016-08-12 18:35:05
とても参考になりました。

残念ながら投稿されたままでは動作しませんでした。投稿内容に加えて、

jqery.metadata.jsをjqeury.metatext.jsと別名保存して、jsソースコードの「metadata」を「metatext」に一括置換して、jquery.metadata.jsと同じように読み込むと動作しました。

ご報告まで。
もっと見る