スポンサーリンク

[DataTables]ソート機能を持つ表の意図した順への並び替え

Web系

並び替え機能を持つtableタグで表示される表を実装する時、いつも使用するライブラリがあります。

DataTables | Table plug-in for jQuery

対象の表のidを指定するだけで、ソート・絞り込み検索・ページネーションの機能を提供してくれる素晴らしいJavaScriptライブラリです。

ソート機能については、カラム内の文字列の種別順でソートされ、例えばアルファベットならaからzの順、全角文字は半角文字の後という順になるようです。

しかし、このソート順を自分で定義したい場合、簡単な方法があります。

DataTables example - HTML5 data-* attributes - cell data

HTML5のdata属性を使って、data-orderという属性を定義します。ここに数値やアルファベットで任意の文字列を出力しておけば、自動的にdata-orderの値を参照してソートしてくれます。便利ですね。

<td data-order="0001">ほげほげ</td>
<td data-order="0002">ふがふが</td>

なお、ページが表示される際に初期状態で並び替えしておきたい場合は下記ドキュメントを参照して下さい。

DataTables example - Default ordering (sorting)
Web系
スポンサーリンク
YUKIをフォローする
Wynes : Note