"Endless scrolling" - Effekt in eine HTML-Tabelle " [geschlossen]

StackOverflow https://stackoverflow.com/questions/216588

Frage

Ich bin die Anzeige einen Bildlauf Daten-Tabelle in eine web-Seite.Diese Tabelle hat mehrere Tausende dynamische Zeilen, so ist es vom server geladen (über AJAX).

Der Benutzer kann nach oben und unten scrollen, also das, was ich brauche, ist zu erkennen, wenn der Benutzer das Ende erreicht, der scrollbar (, dass ist, die Letzte Zeile am unteren Rand der Tabelle), um die Anfrage und zeigen Sie mehr Daten.

Sie finden diese Wirkung in google reader, wenn Sie nach unten scrollen, um die Letzte post in eine gegeben feed, google-Anfragen und zeigt neue Einträge in einer transparenten Art und Weise, aber ich kann nicht herausfinden, wie Sie es erreichen.

Durch die Weg, jetzt bin ich mit einer YUI Datatable

War es hilfreich?

Lösung

Vielen Dank für Ihre Antworten. Das ist mein letzter Arbeits Code (inspiriert von Greg und ajaxian.com ) , dass verwendet einige jQuery-Funktionen und arbeitet mit der YUI Datatable . 

$(".yui-dt-bd").scroll(load_more);

function load_more() {              
    if ($(this).scrollend()) {
        alert("SCROLL END REACHED !");
        // TODO load more data
    }
}

$.fn.scrollend = function() {
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}

Mein nächster Schritt ist meine eigene YUI Paginator implementieren eine vollständige Integration zu erreichen mit YUI-Komponenten:)

Andere Tipps

Ich bin nicht vertraut mit dem spezifischen Elemente, das Sie verwenden, aber in Ordnung  diese auf einem großen Fenster zu implementieren, können Sie Folgendes tun: 

$wnd.onscroll = function() {
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};

Wo scrollTop ist im Wesentlichen „wie viele Pixel verschoben wurde“. Ich gehe davon aus Angewandt auf die Tabelle, die Sie mit arbeiten, um den Job zu tun.

Ich habe gerade für sie gegoogelt und fand diesen Artikel: Implementierung von dynamischer Rolle mit Ajax , JavaScript und XML . Es sieht aus wie eine ausführliche Erläuterung.

Sie können sehen, es funktioniert hier YUI nur. Im Gegensatz zu einem der oben vorgeschlagenen Lösungen, bewegt sie die Rollbalken kontinuierlich die Position und Größe die wahre Größe und Position des sichtbaren Bereichs zu reflektieren, ist es nicht die nächste Charge laden, wenn der Scrollbar Boden erreicht. Die Scrollbar erreicht nur unten, wenn die letzte der gesamten Aufzeichnungen am unteren Rand des Sichtbereichs ist. Natürlich funktioniert dies nur, wenn Sie wissen, wie viele Datensätze gibt.

Es ist eine Eigenschaft, bemerkte ich, während sie durch DOM-Eigenschaften in Firebug zu lesen heute scrollY genannt (in Firebug unter dem DOM Registerkarte content gehen> scrollY), das die Anzahl der Pixel zu sein scheint links auf dem Fenster zu blättern. Versuchen Sie zu sehen, ob dies auch für rollbare Elemente erstellt wird. Dann können Sie Yuval die Funktion verwenden, um neue Daten zu laden.

Ick.Nicht ein großer fan von endlosen scrollen;es bricht einige der wichtigsten Annahmen, die die Leute machen darüber, wie das Web funktioniert.Bitte Versprechen Sie implementieren nur unter folgenden Bedingungen:

1) Sie sind nicht, wobei es für eine ganz gute Seite, die geladen wird, alles in einer schön langen Tisch und ermöglicht dem Benutzer, verwenden Sie Strg + F, um eine Suche innerhalb der Seite für das, was Zeit Fringe kommt auf.

2) Sie nicht Vorhaben, über das einfügen einer Anzeige am unteren Rand jedes Stück gescrollt Daten.

3) stellen Sie ein funktionierendes fallback (hey, ist es, die schönen, langen Tisch wieder) für blinde Menschen und Menschen das surfen im Web mit JavaScript deaktiviert.

Wenn Sie die YUI verwenden, hat es eine tableScrollEvent , dass, wenn die Tabelle scrollt gefeuert wird. Gepaart mit der Gene Funktion des Datatable und man konnte endlose Scrollen implementieren durch die Beobachtung der wie zu handhaben die Daten zurück von Genen

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top