JavaScript

テーブルにソート(並べ替え)の機能だけを簡単につけることができるプラグイン「jQuery Table Sort」

すごくシンプルでいい感じのjQueryプラグイン「jQuery Table Sort」を使ってみました。機能はテーブルにソート(並べ替え)機能をつけるだけのシンプルなプラグインです。それでもたくさんあるテーブルのデータなんかは各項目ごとにソートして見れるようになるとユーザーにもとてもやさしいかと思います。ということで以下使い方です。

[ads_center]

使い方

まずはhead内にjQuery本体とプラグインを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="stupidtable.min.js?dev"></script>

ソート機能をつけるテーブルをセットします。

<script type="text/javascript">
$(function(){
    $("table").stupidtable();
});
</script>

あとはテーブルを記述します。

<table>
    <thead>
        <tr>
            <th class="type-int">ID</th>
            <th class="type-string">Name</th>
            <th class="type-float">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>NameA</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>NameB</td>
            <td>20</td>
        </tr>
        ・・・中略・・・
    </tbody>
</table>

これだけで簡単にソート機能をつけることができます。クリックするごとに昇順、降順にソートできるようになります。

シンプルな機能だけに使いやすいプラグインかと思います。ソート機能をつけたい場合には覚えておきたいっすね。プラグインのダウンロードは以下からどうぞ。

関連記事

  1. JavaScript

    軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる

    軽量なんですが、色々と機能もあるいい感じのjQueryプラグイン「Mo…

  2. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  3. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

  4. Bootstrap Carousel Touch Slider with Text Animation
  5. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  6. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Soundcore Liberty Air 2
  2. Soundcore Liberty 2
  3. マザーツリー
  4. RICOH THETA SC2

アーカイブ

PAGE TOP