jquery - テーブルのjQuery無限スクロール?

Question

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

基本的に、ユーザーがページを下にスクロールすると、テーブルに行を追加したいと考えています。

前もって感謝します。

score 5 · Accepted Answer

これを試してみてください：

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>

score 4 · Accepted Answer

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

データテーブルに慣れていなくても、この無限スクロールをテーブルに実装するには、次の jQuery コードを追加するだけでよいため、興味をそそられるかもしれません。

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

html に入力されたテーブルに移動します (これには4 つの方法があります)。

とにかく、IMO、チェックする価値があります。

編集: @SpoiledTechie.com がコメントで以下に述べているように、この情報は古くなっているため、現在サポートされている方法を調べる必要があります: http://datatables.net/upgrade/1.10#bScrollInfinite