久しぶりにスクリプト設置の説明です。 今回は、テーブル(<table>)の並べ替え(’ソート 昇順 降順) ができるスクリプトです。
どうしてもテーブルの並べ替えがしたくて最初は、データベースを作成してやってみようかともったのですが・・・面倒なので断念。 次に javascript で、できるのでは?? と、探してみると、色々ありました。 とりあえず最初に見つけた tablesort.js を試してみたのですが・・・ こちらのスクリプトは、テーブル内のタグが無視されるという弱点が・・・ さらに私の環境では競合のせい(スクリプト入れすぎ!)でうまく動きませんでした・・・ (T^T)
仕方がないので、どうせ競合があるのなら解決している jQuery を使用した jquery.tablesorter.js 使うことにしました。
そのほかにも、Prototype を使用した Sortable Table や、mootools を使用した sortableTable や、超軽量なのに行の交互の色分けや表示件数を選択できる TinyTable JavaScript Table Sorter などなど色々ありました。
色々試してみたいところではありましたが、jquery.tablesorter.js は、気に入ったので設置しました。
(⌒^⌒)b うん
設置方法
こちらからダウンロードしてください。※ Themes: にある Skin もお好きな方をダウンロードしてください。 (説明では Blue Skin を使用)
ダウンロード後、ご自分のスクリプト置き場に転送してください。(ここでは /wp-content/js/jquery/js/ に置いたものとして説明します。)
Blue Skin は解凍して /wp-content/js/jquery/images/ に置いたものとして説明します。
※ style.css のスタイルシートは、Blue Skin に入っていた画像のアドレスを3ヶ所指定してください。
<head> ~ </head> 間に下記を記述してください。
<script src="https://example.com/wp-content/js/jquery/js/jquery-latest.js" type="text/javascript"></script>
<script src="https://example.com/wp-content/js/jquery/js/jquery.tablesorter.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="https://example.com/wp-content/js/jquery/images/style.css" media="screen" />
黄色の部分にファイルの設置場所(アドレス)を指定<script src="https://example.com/wp-content/js/jquery/js/jquery.tablesorter.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="https://example.com/wp-content/js/jquery/images/style.css" media="screen" />
・・・ jquery-latest.js は、作者様のページでそう説明されていたのでそのまま書いたのですが、現在 jquery.js を読み込んでいれば必要ありません。 ・・・多分 試してダメだったら記述してください。 (;^_^A アセアセ
※ prototype.js も使用している場合は、競合しますのでこちらの対策をしてください。
使用方法
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Due</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>$50.00</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>$50.00</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>$100.00</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
上記のようなテーブルがあるとして、重要な場所は色つきの部分です。<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Due</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>$50.00</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>$50.00</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>$100.00</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
黄文字の部分 : テーブルの id名 と class名 をお好きな名前で記述します。
赤文字の部分 : <thead> タグで囲みます。 ここがソートのリンクになります。
水色文字部分 : <tbody> タグで囲みます。 ここがソートされる場所です。
緑文字の部分 : 黄文字の部分は テーブルの id名 と class名 に合わせてください。 この部分はテーブルの上に記述してもかまいません。
あとは表示させてみて、スタイルシートをいじってお好みで変更してください。
オプション
自分もすべて理解していないので怪しいのですが・・・上記の緑文字部分を下記のように変更するとソートさせたくない場所を指定できます。
左から1個目と4個目をソートしたくない場合
<script>
$(document).ready(function() {
$("#myTable").tablesorter({headers: { 0:{sorter: false}, 3:{sorter: false}}});
});
</script>
$(document).ready(function() {
$("#myTable").tablesorter({headers: { 0:{sorter: false}, 3:{sorter: false}}});
});
</script>
下記だと最初から左から1個目が昇順で、左から5個目が降順になります。
左側の数字が、左から何個目かの指定 0から始まる
右側の数字が、0 が昇順 1 が降順
<script>
$(document).ready(function() {
$('#myTable').tablesorter({ sortList:[[0,0],[4,1]] });
});
</script>
$(document).ready(function() {
$('#myTable').tablesorter({ sortList:[[0,0],[4,1]] });
});
</script>
下記だと td 部分の行が交互に色が変わります。
<script>
$(document).ready(function() {
$('#myTable').tablesorter({ widgets: ['zebra'] });
});
</script>
$(document).ready(function() {
$('#myTable').tablesorter({ widgets: ['zebra'] });
});
</script>
・・・他にもありあそうですが、この辺で (;^_^A アセアセ
サンプル
こちらが、基本のサンプルこちらが、ソートさせたくない指定のあるサンプル
以上です。
(*- -)(*_ _)ペコリ
関係のある記事
No user の書き込みがあります
コメントほしぃ~よぉ~ σ(^◇^;)