javascript - tablesorter (mottie fork)/恢复 tbody 滚动位置 - 正确吗？

Question

我正在寻找更好或官方的方法来恢复我的 tbody 表格内容的滚动位置。

表排序器 2.26.6
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，内容可滚动。

为了保存滚动位置，我在 stackoverflow 上找到了一些提示:

   $("#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;
      }
   });

在所有排序或过滤之后，我想恢复表格的滚动位置。

我尝试 .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”事件应该仅在表更新后触发(“update”事件)；如果 sortEnd filterEnd 组合似乎不起作用，请尝试将其替换为 tablesorter-ready。