tsorter

JavaScript

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

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

tsorter

デモ

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

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

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

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

tsorter

Touch-Tabs-jQueryイベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」前のページ

カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」次のページReshader

関連記事

  1. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

  2. floatThead

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

  3. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  4. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  5. Swipebox

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

  6. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

最近の記事

  1. 成城石井 フレンチロースト
  2. COMOLI カシミアシルクニットパーカ
  3. 橋
  4. 梅と久保田城
  5. マワマット26

アーカイブ

PAGE TOP