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>

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

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

レスポンシブなポートフォリオのWordPressテーマ40前のページ

WordPressで人用のサイトマップを作ってくれるプラグイン「PS Auto Sitemap」の使い方次のページ

関連記事

  1. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

  2. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  3. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

  4. no-image
  5. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

  6. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

コメント

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

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

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP