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. no-image
  2. no-image

    JavaScript

    ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

    Bore Bones Sliderはミニマリスティックでフレキシブルな…

  3. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  4. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  5. 2013年下半期jQueryプラグインまとめ

    JavaScript

    2013年下半期に紹介したjQueryプラグイン68選まとめ

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

  6. Clock Timepicker Plugin for jQuery

コメント

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

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

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP