はじめに
業務で必要だったのでtablesorterを使ったのだが、
欲しい情報が分散していて（何なら英語サイトにしかなかったりして）わかりにくかったので、まとめ。
基本的な使い方
ダウンロードしたjqueryライブラリをscriptに読み込み、
function()でcallするだけ。かんたん。
tableにidを付けるのと、ヘッダをに入れるのを忘れずに。
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をチェック。
$('#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
オプションに関しては情報が少なくて毎回苦労する・・・
引数二番目の配列で[]をいっこ少なくしてたからずっとうまくいかなかった。。
おわりに
まだしばらく触る予定なので、何かあれば追加予定・・・・