Laravel 5分页+无限滚动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

您应该能够就好了，只要使用分页为您的电话，以获得新的职位与页面加载不同。所以你会有两个Laravel调用：

1.）提供页面模板（包括jQuery，CSS和你的max_page count变量 - 查看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这个代码，所以动画效果非常好。

Answer 2

易于和乐于助人是本教程 - 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() !!}