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

この記事は更新から2年以上経過しています。情報が古い可能性がありますのでご注意下さい。

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

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

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

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

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

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

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