tablesorter：動的に行追加（先頭）した後でもソートを有効にする方法（及びスクロール位置の記憶）

#0.はじめに
jQueryのpluginの一つであるtablesorterの使い方を書いてみます。
なお、使用するのは
①http://tablesorter.com/docs/
ではなく
②https://mottie.github.io/tablesorter/docs/index.html
です。
①は2008年から更新されていないようです（changelogより）
②は多機能ですが、多機能すぎてどう使ってよいかわからずだったのでこの記事でまとめてみます

#1.tablesorterの基本設定
#1.1.tableに対しtablesorterを設定する
myTableというidを持つtableに対しtablesorterを設定するには以下で十分です。

tablesorter()

$("#myTable").tablesorter();

widgetsやthemeを読み込むと以下のような設定も可能になります。

tablesorter()

$("#myTable").tablesorter({
  theme: 'blue',			// カラーを青に
  widgets: ['zebra', 'scroller'],	// ゼブラカラーの適用と、スクロールバーの表示
  widgetOptions: {
    scroller_height: 120,		// テーブルの最大サイズ
    scroller_upAfterSort: true,    
    scroller_jumpToHeader: true,   
    scroller_barWidth: null,
  }
});

上記で使用しているのは以下のjsたち。

• https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js
• https://mottie.github.io/tablesorter/js/widgets/widget-scroller.js
• https://mottie.github.io/tablesorter/css/theme.blue.css

#2.先頭行の追加
##2.1.先頭行に行追加する方法
先頭に行追加するには、対象テーブルのtbodyタグに対しprepend()すればよいです。

prepend()

$('#myTable tbody').prepend(
  "<tr>" + 
    "<td>・・・</td>" +
    ・・・
  "</tr>"
);

##2.2.tablesorterをupdateする
行を追加しただけでは、ソート機能が有効になりません。
widgetsでzebraを指定している場合、ゼブラカラーも適用されません。
なので、行追加後に更新を行います。

trigger("update")

$("#myTable").trigger("update");

これで追加した行の値もソートされるようになります。

#3.スクロール位置の記憶
テーブルを更新すればソートが可能になりますが、スクロールバーが先頭に移動してしまいます。
大量の行データがあり、参照中に動的に行追加されるようなケースの場合に、行追加させるたびに先頭へ自動遷移してしまってはみずらくて仕方ありません。
そこで、テーブル更新前後でスクロール位置を変化させない方法を実装します。

方法は

1.　テーブル更新前のスクロール量と全体の高さを記憶する
2.　テーブル更新
3.　行追加前後の全体の高さの差分（増加分）を記憶してあるスクロール量に追加し、スクロール位置を決定する

です。「行追加前後の全体の高さの差分（増加分）」というのは、本ケースが「先頭行に追加」されるからです。
追加された行が必ずしも一定の高さではないことを想定し、このような作りとしています。

ソースはこのようになります。

sample.js

/* スクロールバーの位置を取得 */
var element = $("#myTable").parents('.tablesorter-scroller-table');
var scTop = element.scrollTop();		//現在のスクロール量
var scHeight1 = element[0].scrollHeight;	//全体の高さ

/* テーブル更新 */
$("#myTable").trigger("update");

/* スクロールバーの位置を設定 */
var scHeight2 = element[0].scrollHeight; 	// 全体の高さ（再取得）
scTop = scTop + (scHeight2 - scHeight1); 	// スクロール量（全体の高さの差（増加分）を追加）
element.scrollTop(scTop); 			// スクロール設定

デモをJSFiddleに作成してみました。
スクロールした状態で「行追加」してもテーブルの表示内容は変わらないはずです。

※ゼブラカラーは変わってしまうため、見た目変わっているように見えてしまいますが・・・

#4.ソート中のテーブルに対して
ソートキーが設定されている状態だとスクロール位置が変わってしまいます。
正確にはscrollTop()が効いていないです。
setTimeoutで遅らせるとうまくいったのでソートが完了する前にscrollTop()を行っていることが原因な模様。
そこで"sortEnd"にて実施してみるも・・・ダメ

今のところsetTimeoutで対処しております。