tablesorter (mottie fork) / restore tbody scroll pos - 正确吗？

Question

我正在寻找一种更好的或官方的方法来恢复我的内容的滚动位置body table。

table分拣机 2.26.6
jquery2.2.3

我不使用 tablesorter plugin pager，因为我的所有内容都是可滚动的（不是页面）并且我有没有滚动条插件的滚动条。也许这是我的问题？

table分拣机代码：

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

table body 的高度为 663px，内容可滚动。

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

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

在所有求助或过滤之后，我想恢复 table 的滚动位置。

我尝试 .bind("updateComplete",... 和 $(window).load(function(){ 或 $(window).ready(function(){ 来恢复我的 table body 的滚动位置。但这不起作用，只有当我在恢复功能之前插入一个 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);
   });

有效 - 但 table 跳转到 start/beginning 而不是位置。

我正在寻找一个参数来禁用此跳转，或者是否有更好的方法来使用 tablesorter 恢复滚动位置？

此致
乔臣

Answer 1

滚动位置变化的原因是排序时tbody被分离，所以table高度由浏览器自动调整。恢复 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" 事件只应在 table 更新后触发（"update" 事件）；如果 sortEnd filterEnd 组合似乎不起作用，请尝试将其替换为 tablesorter-ready。

tablesorter (mottie fork) / restore tbody scroll pos - 正确吗？

tablesorter (mottie fork) / restore tbody scroll pos - properly?

javascript

jquery

tablesorter