Effet «défilement sans fin» dans un tableau HTML [fermé]

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

Question

J'affiche un tableau de données défilant dans une page Web. Cette table contient plusieurs milliers de lignes dynamiques. Elle est donc chargée à partir du serveur (via AJAX).

L'utilisateur peut faire défiler de haut en bas. Par conséquent, il me faut détecter le moment où l'utilisateur atteint la fin de la barre de défilement (c'est-à-dire la dernière ligne en bas du tableau), dans l'ordre pour demander et afficher plus de données.

Vous pouvez trouver cet effet dans Google Reader lorsque vous faites défiler l'écran jusqu'à la dernière publication d'un flux donné, que vous demandez Google et affiche les nouvelles publications de manière transparente, mais je ne vois pas comment elles y parviendront.

En passant, j'utilise actuellement un YUI Datatable

.
Était-ce utile?

La solution

Merci pour vos réponses. C’est mon code de travail final (inspiré par Greg et ajaxian.com ) , qui utilise certaines fonctions jQuery et fonctionne avec le 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;
}

Ma prochaine étape consiste à implémenter mon propre YUI Paginator afin de réaliser une intégration complète avec Composants YUI:)

Autres conseils

Je ne connais pas l'élément spécifique que vous utilisez, mais dans l'ordre  pour l'implémenter sur une fenêtre pleine taille, vous pouvez procéder comme suit: 

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

Où scrollTop est essentiellement "combien de pixels ont été défilés". Je suppose qu’appliquer cela à la table avec laquelle vous travaillez fera l'affaire.

Je viens de chercher sur Google et de trouver cet article: Implémentation du défilement dynamique avec Ajax , JavaScript et XML . Cela ressemble à une explication approfondie.

Vous pouvez le voir fonctionner ici uniquement. Contrairement à l’une des solutions suggérées ci-dessus, la barre de défilement se déplace de manière continue, la position et la taille reflètent la taille réelle et la position de la zone visible, elle ne charge pas le prochain lot lorsque la barre de défilement atteint le bas. La barre de défilement atteint le bas uniquement lorsque le dernier enregistrement est au bas de la zone d'affichage. Bien entendu, cela ne fonctionne que si vous connaissez le nombre d'enregistrements.

Il y a une propriété que j'ai remarquée lors de la lecture des propriétés DOM dans Firebug aujourd'hui appelée scrollY (dans Firebug sous l'onglet DOM, accédez à contenu > scrollY ) qui semble être la quantité de pixels restants pour faire défiler la fenêtre. Essayez de voir si cela est également créé pour les éléments à défilement. Ensuite, vous pouvez utiliser la fonction de Yuval pour charger de nouvelles données.

Ick. Pas un grand fan de défilement sans fin; cela rompt certaines des hypothèses clés que les gens font sur le fonctionnement du Web. Veuillez promettre que vous ne l'implémenterez que dans les conditions suivantes:

1) vous ne le remplacez pas par une page parfaitement correcte qui charge tout dans un long tableau et permet à l'utilisateur d'utiliser Ctrl-F pour rechercher à l'intérieur de la page l'heure de début de Fringe.

2) vous ne prévoyez pas d'insérer une annonce au bas de chaque bloc de données défilées.

3) vous fournissez une solution de rechange efficace (hé, il y a de nouveau cette belle table longue) pour les aveugles et les personnes naviguant sur le Web avec le JavaScript désactivé.

Si vous utilisez l'interface utilisateur graphique, elle est tableScrollEvent qui est déclenché lorsque la table défile. Ajoutez à cela la fonction generateRequest du dataTable et vous pouvez implémenter un défilement infini en observant le tableScrollEvent et démarrer une requête lorsque vous approchez de la fin de votre jeu de données.

Les documents YUI n'ont pas d'exemple précis dans ce cas, mais vous montrent comment gérer les données renvoyées par generateRequest

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top