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() !!}