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. number-divider.js

    JavaScript

    数字を分割できるjQueryプラグイン「number-divider.js」

    number-divider.jsは数字を分割させることができるjQu…

  2. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

  3. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

  4. Jquery progress indicator on page scroll
  5. Animate Transition

コメント

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

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

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP