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. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  2. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

  3. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  4. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  5. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  6. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP