Défilement pseudo-continu

Question

Je voudrais afficher un grand nombre de résultats sans plusieurs "pages" pour charger les résultats "0-99" à la page 1, "100-199" à la page 2, "200-299" à la page 3 etc.

Ainsi mon idée est de créer une sorte de liste de données défilante pseudo-continue. Donc, essentiellement, les données seraient chargées si nécessaire mais seulement si défilées vers. La boîte de données aurait alors besoin d'une sorte de barre de défilement logique (je ne sais pas comment je ferais cela à ce stade - peut-être juste avec des flèches). En outre, si des quantités massives de données sont chargées, j'imagine que les anciennes données devront être effacées de la mémoire afin de ne pas tuer un navigateur. Comment faire tout cela dans une interface web en utilisant jquery (ou tout javascript) du côté client et php

Answer 1

Ben Nadel a fait quelque chose de très similaire sur son blog (certes dans CF, pas PHP, mais le code côté serveur est vraiment court) en utilisant JQuery.

http://www.bennadel.com/blog/1803-Creating-A-Bidirectional-Infinite-Scroll-Page-With-jQuery-And-ColdFusion.htm

La bonne chose au sujet de la mise en œuvre de Ben est qu'il efface des choses que vous faites défiler passé ... ce qui signifie que vous ne courez pas dans ce problème DOM infini.

Answer 2

Vous voulez dire quelque chose comme SortFolio? Vous pouvez lier au scroll event avec jQuery comme n'importe quel autre. Vous seriez alors en train de regarder une série de requêtes xml get pour importer des données, soit en ajoutant ou en préfixant la liste, selon si le défilement montait ou descendait.

Answer 3

jQuery Tools has a demo of their Scrollable widget cela ressemble un peu à ce que vous décrivez.

Answer 4

bien il sera probablement obtenir assez complexe quand vous entrez dans mais fondamentalement quelque chose comme ça ...:

// PSEUDO CODE 
$(document).ready(function(){ 
    $('#datascroller').scroll(function(){ 
     var tbl = $('table', this); 
     var $this = $(this); 
     if($('td:last', tbl).scrollTop() == tbl.height()*-1) 
     { 
     //clear current data and display loading animation 
     tbl.fadeOut('fast', function(){ 
      $(this).replaceWith(loadingAnimationElement.hide()); 
      loadingAnimationElement.fadeIn('fast'); 
      $.get('/phpscript.php', {page: 2}, function(results){ 
       var $data = $(results).hide(); 
       loadingAnimationElement.fadeOut('fast', function(){ 
        $(this).replaceWith($data); 
        $data.fadeIn('fast'); 
       }) 
      }); 
     }); 
     } 
    }); 
});