Laravel 5 Paginate + Infinite Scroll jQuery

Question

我试图用来paginate()实现无限滚动.我认为最简单的方法是使用'无限滚动'来实现这一目标.如果你有任何其他的建议怎么做没有无限滚动库,只使用jQuery,我很高兴知道..

我返回变量来查看如下:

public function index()
 {
    $posts = Post::with('status' == 'verified')
                      ->paginate(30);

    return view ('show')->with(compact('posts'));
 }

我的看法:

<div id="content" class="col-md-10">
    @foreach (array_chunk($posts->all(), 3) as $row)
        <div class="post row">
            @foreach($row as $post)
                <div class="item col-md-4">
                    <!-- SHOW POST -->
                </div>
            @endforeach
        </div>
    @endforeach
    {!! $posts->render() !!}
 </div>

Javascript部分:

$(document).ready(function() {
  (function() {
     var loading_options = {
        finishedMsg: "<div class='end-msg'>End of content!</div>",
        msgText: "<div class='center'>Loading news items...</div>",
        img: "/assets/img/ajax-loader.gif"
     };

     $('#content').infinitescroll({
         loading: loading_options,
         navSelector: "ul.pagination",
         nextSelector: "ul.pagination  li:last a",   // is this where it's failing?
         itemSelector: "#content div.item"
     });
   });
}); 

但是,这不起作用. - > render()部分正在工作,因为我得到了[<[1] 2] 3]>]部分.但是,无限滚动不起作用.我也没有在控制台中出现任何错误.

[<[1] 2] 3]>]在视图中是这样的:来源:

<ul class="pagination">
       <li class="disabled"><span>«</span> </li>                    //   «
       <li class="active"><span>1</span></li>                       //   1
       <li><a href="http://test.dev/?page=2">2</a></li>             //   2
       <li><a href="http://test.dev/?page=3">3</a></li>             //   3
       <li><a href="http://test.dev/?page=2" rel="next">»</a></li>  //   »
</ul>

Answer 1

本教程简单而有用 - http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll

最终脚本可能看起来像这样

{!! HTML::script('assets/js/jscroll.js') !!}
<script>
    $('.link-pagination').hide();
    $(function () {
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            loadingHtml: '<img class="center-block" src="/imgs/icons/loading.gif" alt="Loading..." />', // MAKE SURE THAT YOU PUT THE CORRECT IMG PATH
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.infinite-scroll',
            callback: function() {
                $('.link-pagination').remove();
            }
        });
    });
</script>

你只需要使用laravel的分页

{!! $restaurants->links() !!}

Answer 2

只要您获取新帖子的调用与页面加载不同，您就应该能够很好地使用分页。所以你会有两个 Laravel 调用：

1.) 提供页面模板（包括 jQuery、CSS 和 max_page 计数变量 - 查看 HTML） 2.) 让 AJAX 根据您提供的页面调用帖子。

这就是我如何让无限滚动发挥作用......

HTML：

<!-- Your code hasn't changed-->
<div id="content" class="col-md-10">
  @foreach (array_chunk($posts->all(), 3) as $row)
    <div class="post row">
        @foreach($row as $post)
            <div class="item col-md-4">
                <!-- SHOW POST -->
            </div>
        @endforeach
    </div>
  @endforeach
  {!! $posts->render() !!}
</div>

<!-- Holds your page information!! -->
<input type="hidden" id="page" value="1" />
<input type="hidden" id="max_page" value="<?php echo $max_page ?>" />

<!-- Your End of page message. Hidden by default -->
<div id="end_of_page" class="center">
    <hr/>
    <span>You've reached the end of the feed.</span>
</div>

在页面加载时，您将填写 max_page 变量（因此请执行以下操作：ceil(Post::with('status' == 'verified')->count() / 30);.

接下来，你的 jQuery：

var outerPane = $('#content'),
didScroll = false;

$(window).scroll(function() { //watches scroll of the window
    didScroll = true;
});

//Sets an interval so your window.scroll event doesn't fire constantly. This waits for the user to stop scrolling for not even a second and then fires the pageCountUpdate function (and then the getPost function)
setInterval(function() {
    if (didScroll){
       didScroll = false;
       if(($(document).height()-$(window).height())-$(window).scrollTop() < 10){
        pageCountUpdate(); 
    }
   }
}, 250);

//This function runs when user scrolls. It will call the new posts if the max_page isn't met and will fade in/fade out the end of page message
function pageCountUpdate(){
    var page = parseInt($('#page').val());
    var max_page = parseInt($('#max_page').val());

    if(page < max_page){
       $('#page').val(page+1);
       getPosts();
       $('#end_of_page').hide();
    } else {
      $('#end_of_page').fadeIn();
    }
}


//Ajax call to get your new posts
function getPosts(){
    $.ajax({
        type: "POST",
        url: "/load", // whatever your URL is
        data: { page: page },
        beforeSend: function(){ //This is your loading message ADD AN ID
            $('#content').append("<div id='loading' class='center'>Loading news items...</div>");
        },
        complete: function(){ //remove the loading message
          $('#loading').remove
        },
        success: function(html) { // success! YAY!! Add HTML to content container
            $('#content').append(html);
        }
     });

} //end of getPosts function

就这样吧！就这样。我也在这段代码中使用了Masonry，所以动画效果非常好。