【jquery】tablesorter機能でよく使うものメモ

#はじめに

業務で必要だったのでtablesorterを使ったのだが、
欲しい情報が分散していて（何なら英語サイトにしかなかったりして）わかりにくかったので、まとめ。

#基本的な使い方

ダウンロードしたjqueryライブラリをscriptに読み込み、
function()でcallするだけ。かんたん。

tableにidを付けるのと、ヘッダを<thead>に入れるのを忘れずに。
tbodyの中身だけがソート対象になる。
tfootはあってもなくてもいいけど、あってもソート対象外。必ず末尾に入るから合計行とかに便利。

```
<head>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>	<!-- tablesortのためのjqueryライブラリ -->
<script language=javascript>
$(function(){	
	$('#sorttable').tablesorter();
});
</script>
</head>
<body>
	<table id="sorttable">
		<thead>
			<tr>
				<th>キャンペーン名</th>
				<th>広告グループ名</th>
				<th>広告費</th>
	        </tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="2">合計</td>
				<td>39000</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>キャンペーンA</td>
				<td>広告グループ1</td>
				<td>20000</td>
			</tr>
			<tr>
				<td>キャンペーンB</td>
				<td>広告グループ2</td>
				<td>10000</td>
			</tr>
			<tr>
				<td>キャンペーンC</td>
				<td>広告グループ3</td>
				<td>9000</td>
			</tr>
		</tbody>
	</table>
</body>
```



#アレンジ：オプション設定

カラムごとにソートするしない、ロードしたときのデフォルトソート項目を設定できる。
詳細は[tablesorterのGitHub](https://mottie.github.io/tablesorter/docs/)をチェック。

```
	$('#sorttable').tablesorter({
		headers: {
			0: {sorter:false},
			1: {sorter:false},
			2: {sorter:true},
		},
		sortList: [[0,1],[2,0]],		//デフォルトソート
	});
```


#アレンジ：【プラグインmetadata】表示内容以外でのソート

metadataプラグインをheadで読み込み、
普通にfunctionでtablesorterをcallした上で
該当項目のtheadにCSSで{sorter:'metadata'}を入れる。
tbodyのほうは{sortValue:XXX}のようにソートさせたい値をセット。

例では、「広告費」カラムのソートが表示の数字ではなくsortValueで指定した項目になる。

```
<head>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>	<!-- メタデータプラグイン -->
<script language=javascript>
$(function(){	
	$('#sorttable').tablesorter();
});
</script>
</head>
<body>
	<table id="sorttable">
		<thead>
			<tr>
				<th>キャンペーン名</th>
				<th>広告グループ名</th>
				<th class="{sorter:'metadata'}">広告費</th>
	        </tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="2">合計</td>
				<td>39000</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>キャンペーンA</td>
				<td>広告グループ1</td>
				<td class="{sortValue:1}">20000</td>
			</tr>
			<tr>
				<td>キャンペーンB</td>
				<td>広告グループ2</td>
				<td class="{sortValue:2}">10000</td>
			</tr>
			<tr>
				<td>キャンペーンC</td>
				<td>広告グループ3</td>
				<td class="{sortValue:3}">9000</td>
			</tr>
		</tbody>
	</table>
</body>
```

#アレンジ：【ex-table-filter】テーブルをフィルタリング表示

tablesorterしたテーブルをフィルタリングで表示する。とっても便利。
ただしフィルタリングしてくれるけどtfootはそのままなので合計とか再集計してくれるわけではない。。

```
<script type="text/javascript" src="js/jquery.ex-table-filter.js"></script>	<!-- filterのためのjqueryライブラリ -->
<script>
	$('#sorttable').exTableFilter({
		filters : {
			0 : '#myfilter'
		}
	});
</script>

	フィルタリング: <input type="text" id="myfilter">

	<table id="sorttable">・・・・・・</table>

```

#アレンジ：rowspanした行もセットでソートしたい

rowspanして２レコードで１レコード分のデータとする場合。
２レコードを１セットとしてソートしたいのに、デフォルトだと１行ごとにソートされてしまう。

そんな場合は、２レコード目にCSSでtablesorter-childRowを入れる。
これを入れると、「このレコードは子分ね！」と判断され、親分レコードにくっついて移動するようになる。
rowspanが３なら２，３レコード目にtablesorter-childRowを入れればいい。

これググってもなかなか出てこなくてかなり手こずったのでメモ。

```
    <table id="sorttable">
        <thead>
        	<tr>
                <th rowspan="2">キャンペーン名</th>
                <th>広告グループ名</th>
        	</tr>
            <tr>
                <th>広告費</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">キャンペーンA</td>
                <td>広告グループ1</td>
            </tr>
            <tr class="tablesorter-childRow">
                <td>20000</td>
            </tr>
            
            <tr>
                <td rowspan="2">キャンペーンB</td>
                <td>広告グループ2</td>
            </tr>
            <tr class="tablesorter-childRow">
                <td>10000</td>
            </tr>
        </tbody>
    </table>
```

#tablesorterの再設定　2020/09/08ADD

検索条件を変えてテーブルを生成した場合に、作り方によってはちゃんとソートできなくなる場合がある。
その場合は、再検索した際にtablesorterを強制的にリセット（初期化）⇒アップデートってのをしてやるとうまくいく。こともある。。

参考⇒https://www.earthlink.co.jp/engineerblog/intra-mart-engineerblog/2207/

```
$('#ResultTable').trigger('filterReset').trigger('sortReset');

$('#ResultTable').tablesorter({
});

$('#ResultTable').trigger("updateAll");

//resetしてしまったのでデフォルトのsortListを設定し直し
$('#ResultTable').trigger("sorton", [[[5,1]]]);

```
※ただし公式のやり方ではないとのことなので注意


sortonのtriggerに関しては以下を参考にしました
http://developmentor.lrlab.to/postal/jquery/jquery.tablesorter/basic2.html

オプションに関しては情報が少なくて毎回苦労する・・・
引数二番目の配列で[]をいっこ少なくしてたからずっとうまくいかなかった。。


#おわりに

まだしばらく触る予定なので、何かあれば追加予定・・・・