GHWEB06.GRASSHOPPER

jQueryプラグインでテーブルのソート

  • Category:Web関連
  • Web関連の備忘録

tableCMSで複数ページのカスタムフィールドで入力した値をテーブルで一覧表示にした時、該当の項目が探し辛かったためjQueryプラグインでテーブルのソートを行ってみました。
プラグインは「table sorter」を使用。

組み込み方法

jQueryとプラグインを読み込み

jQueryは、Google Hosted Libraries の バージョン1.11.1 を使用。★バージョン2.1.1でも動作確認。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>

table要素に設定したidをtablesorter()で実行

$(function(){
$("#mytable").tablesorter();
});

styleの指定

<link rel="stylesheet" href="blue/style.css" type="text/css" media="print, projection, screen" />

table要素にidの指定、classにtablesorterを設定

<table id="mytable" class="tablesorter">

サンプル

以上

これでサイトの閲覧者がテーブルのソートが出来ます。
スペックや金額一覧等の表作成をする場合に良いんじゃないでしょうか?

  • 掲載: