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番目の列のソート機能を外すという設定です。なので、これを使えば自分がソート機能を外したい列なんかが簡単に設定できますね。
ということで、結構よさげなテーブルのプラグインでした。

関連記事

  1. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

  2. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  3. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  4. Circliful

    JavaScript

    円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

    CirclifulというjQueryプラグインを使えば、統計情報を伝え…

  5. jQuery ui material design datepicker
  6. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

コメント

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

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

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP