JavaScript

テーブルを綺麗なデザインにしてくれたり並び替え(ソート)もできるjQuery「tablesorter」

jQueryのプラグインで、テーブルをフレキシブルなデザインにしてくれたり並び替え(ソート)機能も実装してくれる「tablesorter」を使ってみました。画面サイズに合わせてレイアウトも調整されるのでとても素敵なプラグインかと思います。あと並び替えの機能も、自分の好きな列に簡単に追加したり削減したりできるので使いやすいですね。以下使い方です。

[ads_center]

使い方

下記URLよりファイルをダウンロードします。デモもあります。

色々とファイルが入っているんですが、基本的に必要なものは以下のものです。

  • jquery-latest.js
  • jquery.tablesorter.js
  • themesフォルダに入っているblueかgreen

テーマはここではblueにしてみます。あとはいつも通りhead内にこれらのファイルを読み込んでいきます。

<link href="themes/blue/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>

そして、ソート機能をつけていきます。

<script type="text/javascript">
$(document).ready(function() {
    $("#myTable").tablesorter(); 
}); 
</script>

一行おきに縞模様のように色を加えて見やすくしたい場合はこんな感じで指定します。

$(document).ready(function() {
    $("#myTable").tablesorter({
        widgets: ['zebra'],
    }); 
}); 

そうするとこのようにテーブルが見やすくなります。

jquery-tablesorter サンプル01

あと、例えば最初に表示される順番を自分で指定したい場合や、ソート機能を外したい部分がある場合には以下のように設定すればいいみたいです。

$(document).ready(function() {
    $("#myTable").tablesorter({
        widgets: ['zebra'],
        sortList: [[3, 0]],
        headers: {
            1: {sorter:false},
        }
    }); 
});

上記の場合は、sortListが3,0となっているので左の列から0から数えて3番目の列を昇順にして表示させるという設定です。headersの部分は同じく左から0をスタートに数えて1番目の列のソート機能を外すという設定です。なので、これを使えば自分がソート機能を外したい列なんかが簡単に設定できますね。
ということで、結構よさげなテーブルのプラグインでした。

jQueryでウィンドウサイズによって処理を変えるjQueryの基本的なanimateメソッドを使って適当に遊んでみる前のページ

jQueryのfocusとblurを使えばフォームが便利になる次のページjQueryでウィンドウサイズによって処理を変える

関連記事

  1. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  2. stroll.js

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

  3. NO IMAGE
  4. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  5. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  6. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

コメント

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

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

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP