テーブル上のjQuery無限スクロール？

Question

良いチュートリアルを知っている人はいますか、または無限スクロールをテーブルに追加するために使用できるjQueryプラグインはありますか？

基本的に、ユーザーがページを下にスクロールするときに、テーブルにさらに行を追加する必要があります。

ありがとうございます。

Answer 1

ただ、これを試してみる：

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

それはあなたのニーズに合っている場合は、これを見てとることができます。http://datatables.net/examples/basic_init/scroll_y_infinite.html

をテーブルの上に、この無限スクロールを実装するためとして、あなたはDataTableのに慣れていない場合でも、それは、それを使用することができ陰謀こと（彼らはそれを行うために4 waysを持っている）HTMLで人口のテーブルに

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

：あなたはちょうどこのjQueryのコードを追加する必要があります。

Anyay、IMO、チェックアウトの価値があります。

編集：@ SpoiledTechie.comコメントで下の言うようには - この情報はに古いですし、彼らが今いることをサポートする方法になります。http://datatables.net/upgrade/1.10#bScrollInfiniteは

Answer 3

あなたは、以下のリンクをチェックアウトする場合があります。

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/

こちらがお役に立てば幸いです。

Answer 4

これは、無限のスクロールのための私のお気に入りのjqueryプラグインの2つです。両方とも、それらの使用方法の良い例があります。

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

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