jQuery unendliche Schriftrolle auf einem Tisch?

Question

Kennt jemand von einem guten Tutorial, oder jQuery Plugin kann ich verwenden, um unendlich scroll auf meiner Tabelle hinzuzufügen?

Ich möchte im Grunde mehr Zeilen zu der Tabelle hinzufügen, wie ein Benutzer die Seite nach unten scrollt.

Vielen Dank im Voraus.

Answer 1

Probieren Sie dies aus:

HTML:

<div id="postswrapper"> 
     <div class="item">content</div> 
     ... 
     <div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" /></center></div> 
    </div> 

Javascript:

<script type="text/javascript"> 
$(window).scroll(function() 
{ 
    if($(window).scrollTop() == $(document).height() - $(window).height()) 
    { 
     $('div#loadmoreajaxloader').show(); 
     $.ajax({ 
     url: "loadmore.php", 
     success: function(html) 
     { 
      if(html) 
      { 
       $("#postswrapper").append(html); 
       $('div#loadmoreajaxloader').hide(); 
      }else 
      { 
       $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>'); 
      } 
     } 
     }); 
    } 
}); 
</script> 

Answer 2

Sie einen Blick auf diese nehmen, wenn es Ihren Bedürfnissen entspricht: http://datatables.net/examples/basic_init/scroll_y_infinite.html

Auch wenn Sie mit Datentabellen nicht vertraut sind, kann es intrigieren Sie es verwenden, wie für diese unendliche Rolle auf einem Tisch zu implementieren Sie müssen nur diesen Code jQuery hinzufügen: im html

$(document).ready(function() { 
    $('#example').dataTable({ 
    "bScrollInfinite": true, 
    "bScrollCollapse": true, 
    "sScrollY": "200px" 
    }); 
}); 

zum besiedelten Tabelle (Sie haben 4 ways, das zu tun).

Anyay, IMO, einen Besuch wert.

edit: Wie @ SpoiledTechie.com unten im Kommentar sagt - diese Info outdate ist und Sie sollten so aussehen, in die sie unterstützen, dass jetzt: http://datatables.net/upgrade/1.10#bScrollInfinite

Answer 3

Sie möchten vielleicht folgende Links überprüfen:

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/#.UBKSdHWi6so

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-infinite-scroll-web-gallery/

http://wp.tutsplus.com/tutorials/theme-development/how-to-create-infinite-scroll-pagination/

Ich hoffe, das hilft!

Answer 4

Dies sind zwei meiner Lieblings-Jquery-Plugins für unendlich scroll. Beide haben gute Beispiele, wie man sie benutzt.

https://github.com/msjolund/jquery-esn-autobrowse

https://github.com/paulirish/infinite-scroll/