table並び替え（ソート）などができるようになるjQuery「tablesorter」

<table>タグで組んだ表組みを綺麗にゼブラ模様にしたりソートしたりする機能をつけることができます。

歴代J1 順位表で実際に使っていますので見てみて下さい。

ファイルの読み込みは以下の3つ。自分が使いたいcssとjquery-latest.jsとjquery.tablesorter.jsです。jquery-latest.jsは他でjQueryを読み込んでいたら必要ありません。

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

WordPressではfunction.phpで読み込ませることになるので、jsの場合はこんな感じ。

wp_enqueue_script( 'jquery.tablesorter', get_bloginfo('stylesheet_directory'). '/_jquery.tablesorter/jquery.tablesorter.js', array( 'jquery' ), '1.0');//tableソート用js */

cssはこんな感じでしょうか。

wp_register_style('table_sort_css', get_bloginfo('stylesheet_directory'). '/_jquery.tablesorter/themes/blue/style.css');/*tableソート用css */
：
：
wp_enqueue_style('table_sort_css');

でtableを組みます。重要なのはidとclassです。idは任意のものを付けて、classは必ずtablesorterにします。

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>

で、ページ内のどこかにスクリプトを表記します。idを指定することでそのidのtableがソート対応になります。複数のtableでも使えます。

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

オプションもいろいろとあります。

<script type="text/javascript">
jQuery(function($) {
	$('#myTable').tablesorter({
		widgets: ['zebra'],
		sortList: [[0,0],[1,1]] ,
		headers: {2: {sorter:false}}
	});
});
</script>

widgets: [‘zebra’]は一行づつ色を変えるオプションです。

sortListはデフォルトで表示する昇順降順を指定出来ます。[0,0]の場合は0列目（左から1列目）を0（昇順）で表示するという意味になります。同様に[1,1]は1列目（左から2列目）を1（降順）で表示するという意味になります。

headers: {2: {sorter:false}はソートさせたくない列に対して指定します。この場合2（左から3列目）をソートしないようにします。

他にもいろいろオプションがありますが、よく使うのはこれくらいでしょう。

詳しい説明はjQuery plugin: Tablesorter 2.0で。