表排序器(莫蒂叉)/恢复正文滚动POS - 正确

Question

我寻找一种更好或官方的方式来恢复我的 tbody 表格内容的滚动位置。

表排序器 2.26.6
jquery 2.2.3

我不使用表格排序器插件分页器，因为我的所有内容都是可滚动的（不是页面），并且我的滚动条没有滚动条插件。也许这是我的问题？

表排序器的代码：

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

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

我尝试.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);
   });      

这有效 - 但桌子跳到开始/开始而不是位置。

我正在寻找一个参数来禁用此跳转，或者有更好的方法可以使用表格排序器恢复滚动位置？

问候
约亨

Answer 1

滚动位置变化的原因是，在排序过程中，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。