2016-07-12 8 views
1

Ich suche nach einer besseren oder offiziellen Möglichkeit, die Scroll-Position meines tbody-Tabelleninhalts wiederherzustellen.tablesorter (mottie fork)/wiederherstellen tbody scroll pos - richtig?

tablesorter 2.26.6
jquery 2.2.3

Ich benutze tablesorter nicht Pager-Plugin, weil alle meine Inhalte scrollbaren ist (nicht mit Seiten), und ich habe Scrollbalken ohne das Stellrad Plugin. Vielleicht ist das mein Problem?

-Code für 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", 
     } 
    }) 
}); 

Der Tischkörper hat eine Höhe von 663px und der Inhalt ist scrollbar.

die Bildlaufposition speichern ich einige Tipps auf Stackoverflow gefunden:

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

Nachdem alle Umsortierung oder Filterung ich die Scroll-Position meiner Tabelle wiederherstellen möchten.

Ich versuche .bind("updateComplete",... und $(window).load(function(){ oder $(window).ready(function(){, um die Scroll-Position meines Tabellenkörpers wiederherzustellen. Aber das funktioniert nicht, nur wenn ich vor der Wiederherstellungsfunktion eine window.alert Popup-Nachricht einfüge (ich denke jetzt ist es sicher, dass es der letzte Anruf ist).

Auf der Website http://callmenick.com/post/check-if-everything-loaded-with-javascript fand ich einen Hinweis und bauen diese:

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

, das funktioniert - aber die Tabelle an den Anfang/Anfang springt und als in die Position.

Ich suche nach einem Parameter, um diesen Sprung zu deaktivieren, oder gibt es eine bessere Möglichkeit, die Scroll-Position mit Tablesorter wiederherzustellen?

Grüße
Jochen

Antwort

1

Der Grund ändert sich die Bildlaufposition ist, weil während des Sortierens, das tbody abgenommen wird, so dass die Tischhöhe automatisch vom Browser eingestellt wird. Sobald der tbody wiederhergestellt ist, wird die Bildlaufleiste nicht mehr auf den vorherigen Wert zurückgesetzt.

Ich habe diese Methode nicht getestet, aber wenn Sie die Bildlaufposition in einem "scrollStart" und "filterStart" -Ereignis speichern, dann wiederherstellen Sie es auf "filterEnd" und "sortEnd", sollte es funktionieren. Hier ist der Beispielcode:

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

Die „update“ Ereignis nur Brennen werden sollte, nachdem die Tabelle („update“ event) aktualisiert wird; Wenn der sortEnd filterEnd Combo nicht zu funktionieren scheint, ersetzen Sie ihn durch tablesorter-ready.

+0

Die Speicherfunktion funktioniert nicht oder die Tabelle springt nicht zur gespeicherten Position. Aber die Veranstaltung "setsorter-ready" ist perfekt. ich meine Quelle geändert: '.on ('tablesorter-ready', function() {var posOverview = localstorage [ "fsi_srvoverview_scroll"]; if (posOverview) { $ ("# fsi_srvoverview") [0] .scrollTop = posOverview; } }) ' Ich denke, das ist besser als eine zusätzliche Intervallfunktion. Vielen Dank! – Jochen