[Javascript] 簡単にtableタグのソートを行う「table_sort」ライブラリの公開

毎日１０キロほどのジョギングと５キロぐらいのウォーキングをやっていて、みるみる体重が減ってきた、ユゲタです。 体重が減ると、見た目が若返る感覚がなんとも気持ちいいとモチベーションが続くように自分を言い聞かせています。 WEBシステム構築や、データ関連のサービスで、必ず発生する表示機能が「リスト表示」の機能です。

リスト表示の重要です。

登録したデータの一覧を見たり、システムで管理しているデータをエクセル表みたいに表示させるのは、管理機能としても、ユーザーデータ確認ツールとしても、必須です。 大体のリストがエクセルで作ったように、一番上の行に縦行のラベルをセットして、左端のセルに行番号を入れるというお決まりのモノですが、wordpressのブログリストも同じ感じですね。 このリストって、データを一望できるという事でシステムによっては無くてはならない存在にもなりますが、エクセルと違ってシステム構築側が色々な機能を埋め込まなければいけないため、よくあるトラブルとしては「エクセルのように簡単にソートできるようにしてよ」と、システム依頼者は非常に簡易に言ってきますが、 自裁にソート機能を搭載するのはかなり骨が折れる作業になります。 余談ですが、wordpressのように、ソートボタンを押す度にページがリロードするようなCGIでソート処理を行う（おそらくSQLの呼び出しでソートしているため・・・）システムは使いづらくて仕方がないので、大体のtableリストを簡単にソートできるライブラリを作っておきました。 世の中には似たようなライブラリが出回っていますが、jQueryが必要だったり、装飾が気に入らなかったり、思ったようにカスタマイズできなかったりするので、ここはオレオレで軽めの簡易な必要最低限機能のライブラリを作っておきました。

table_sortライブラリの紹介

すでにgithubにアップしているので、そちらのreadmeを見てもらってもいいのですが、概要と設置方法などをブログでも解説しておきます。

概要

機能はtableタグに対して、簡単にソート機能を追加するライブラリです。 ポイントはtableタグに対して行う機能ということで、divなどの他のタグをインライン構成やflex構成でマトリクス表示するような見た目テーブル表組みのようにしてる場合は今回のソートライブラリでは対応できません。 でも、基本的にはtableタグ構成で表組みをするのが一般的なので、その点は問題ないと考えてます。

設置

そして設置方法ですが、githubにアップしてあるsample.htmlを確認してもらえるとわかりやすいのですが、簡単に説明すると以下の２点です。

1. htmlのheadタグ内に"table_sort.js"を読み込むscriptタグを設置 2. ソートする対象のtableタグのselectorを指定してインスタンス起動

たったのこれだけでとりあえずは簡単にソート機能が実現できます。

カスタマイズ

ソートと一言で言っても、文字列ソートと数値ソートでは、ソートした結果が全く変わってくるし、その他にも色々なパターンの並べ替え方があるので、初期バージョンでは以下の４パターンを設けておきました。

1. string : 文字列(デフォルト） 2. number : 数値 3. date : 日付(yyyy/mm/dd) 4. time : 時間(hh:ii)

before-after

下記のようなtable構成のDOMに対して、ライブラリを適用すると・・・ このように、ヘッダにソートのアイコンが表示され、それをクリックすると（セルをクリックする仕様）ソートが行われます。

要望

日付と時間をセットしたものなども必要になりそうなので、今後のバージョンアップで搭載していきたいと思います。 ちなみに、日付や時間は、桁数をあわせておかなくてもちゃんと並べられるようにしているし、日付は"/"（スラッシュ）区切り、時間は":"（コロン）区切りでのみ対応しているので、区切り文字の任意指定などの機能も必要ですね。 あと、tableで表組みして数値などの表をエクセルで作成した際に、一番下に合計行を付けているパターンがありますが、実はこれには対応できていません。 colspanに対応していないという点もありますが、これも以後のバージョンアップで対応していきたいと思います。

Githubで公開中

https://github.com/yugeta/table_sort