tsorter

JavaScript

テーブルにソート(並べ替え)機能を実装できる「tsorter」

tsorterは、JavaScriptを用いてHTMLテーブルにソート(並べ替え)機能を実装することができます。たくさんのデータを任意の順番通りにクイックに並べ替えることが可能です。テーブルに付加価値をつけたい人にはピッタリの機能ですね。

tsorter

デモ

デモページには10エントリーあるテーブルと100エントリーあるテーブルが用意されています。テーブルの上部には、ID、NAME、PRICE、LATITUDE、LONGITUDE、ADDRESSという項目が並べられていて、ここのいずれかの項目をクリックすることで、その項目を基準にした順番に並べ替えられます。

ちなみにデモページ読み込み時はID順になっています。各項目のクリックを繰り返す度に、昇順や降順に切り替えることが可能です。

たくさんのデータが並べられたテーブルでは、このように任意の順番にソートして表示させることで効率的にデータの内容を理解・チェックすることができますね。データの量が多ければ多いほど役立つ機能だと思います。

ファイル容量も通常版で7KB、圧縮版で2KBほどとかなり軽量になっています。シンプルながらも強力な機能を実装できる「tsorter」で、HTMLテーブルをより利便性の高いものにしてみてはいかがですか?

tsorter

関連記事

  1. PIGNOSE Calendar

    JavaScript

    美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」

    PIGNOSE Calendarは、美しくてシンプルな操作性によるデー…

  2. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  3. JavaScript

    スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

  4. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

  5. Pilpil

    JavaScript

    プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

    Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリで…

  6. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP