tablesorter（mottie fork）/ tbodyスクロールposを正しく復元する？

Question

私のtbodyテーブルの内容のスクロール位置を復元するためのより良い、あるいは正式な方法を探します。

tablesorter 2.26.6
私のすべてのコンテンツは、（いないページを持つ）スクロール可能であるので、私は、ページャをプラグインtablesorterを使用していないと私はスクロールプラグインなしでスクロールバーをしているのjQuery 2.2.3

。多分これは私の問題ですか？

tablesorterのコード：

$(document).ready(function() { 
    $("#fsi_srvovtable") 
    .tablesorter({ 
     theme: "bootstrap", 
     widthFixed: true, 
     showProcessing : true, 
     headerTemplate: '{content} {icon}', 
     widgets: ["storage", "saveSort", "uitheme", "filter"], 
     headers: { 0: { 
         sorter: false, 
         filter: false 
        } 
       }, 
     widgetOptions: { 
     filter_reset : 'button.reset', 
     filter_hideFilters: false, 
     filter_ignoreCase: true, 
     filter_saveFilters: true, 
     filter_cssFilter: "form-control", 
     } 
    }) 
}); 

テーブル本体が663pxの高さを有しており、コンテンツがスクロール可能です。私は私のテーブルのスクロール位置を復元したいすべて頼るか、フィルタリングの後

$("#fsi_srvoverview").on("scroll", function() { 
     $("#fsi_scroll").html($("#fsi_srvoverview")[0].scrollTop); 
     if (localStorage) { 
     var posOverview = localStorage["fsi_srvoverview_scroll"]; 
     if (posOverview) { 
      localStorage.removeItem("fsi_srvoverview_scroll"); 
     } 
     localStorage["fsi_srvoverview_scroll"] = $("#fsi_srvoverview")[0].scrollTop; 
     return true; 
     } 
     else { 
     return false; 
     } 
    }); 

：私はstackoverflowの上のいくつかのヒントを発見したスクロール位置を保存するには

。

テーブル本体のスクロール位置を復元するには、.bind("updateComplete",...と$(window).load(function(){または$(window).ready(function(){とお試しください。しかし、復元機能の前にwindow.alertポップアップメッセージを挿入した場合に限り、これは機能しません（最後の呼び出しであると確信しています）。ウェブサイトhttp://callmenick.com/post/check-if-everything-loaded-with-javascriptオン

は私がヒントを発見し、これを構築：

作品

$(window).load(function(){ 
     var everythingLoaded = setInterval(function() { 
     if (/loaded|complete/.test(document.readyState)) { 
      clearInterval(everythingLoaded); 
      var posOverview = localStorage["fsi_srvoverview_scroll"]; 
      if (posOverview) { 
       $("#fsi_srvoverview")[0].scrollTop = posOverview; 
      } 
     } 
     }, 10); 
    });  

- しかし、表がスタート/先頭にして位置よりもジャンプしています。

私はこのジャンプを無効にするパラメータを探しますか、またはtablesorterでスクロール位置を復元するより良い方法がありますか？

よろしく
ヨッヘン

Answer 1

ソーティング中、TBODYが取り外されるので、テーブルの高さを自動的にブラウザによって調整されるため、スクロール位置の変化がある理由。 tbodyが復元されると、スクロールバーは元の値に戻りません。

私はこのメソッドをテストしていませんが、スクロール位置を "scrollStart"イベントと "filterStart"イベントに保存してから、 "filterEnd"と "sortEnd"に復元すると動作します。

var top, left, 
    $win = $(window); 
$('table') 
    .on('sortStart filterStart', function() { 
    left = $win.scrollLeft(); 
    top = $win.scrollTop(); 
    }) 
    .on('sortEnd filterEnd', function() { 
    $win.scrollLeft(left); 
    $win.scrollTop(top); 
    }) 
    .tablesorter(); 

"updateComplete"イベントは、テーブルが更新された後にのみ発生する必要があります（「更新」イベント）。 sortEnd filterEndのコンボが機能していないようであれば、tablesorter-readyに置き換えてみてください。