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

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  2. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

  3. OneBook3d

    JavaScript

    フォトアルバム(ブック)に最適なjQueryプラグイン「OneBook3d」

    OneBook3dはブラウザ上でフォトアルバム(ブック)を作るのにとて…

  4. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  5. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  6. Vertical Timeline

    JavaScript

    垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline…

    Vertical Timelineは、垂直型のシンプルなタイムラインを…

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP