Infinite Scroll jQuery & Laravel 5 Đánh số trang

Question

Tôi trở về thành công dữ liệu từ bộ điều khiển

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

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

Ngoài ra, tôi đang thể hiện thành công tất cả mọi thứ theo quan điểm của tôi:

<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> 

Mọi thứ đều được làm việc độc đáo cho đến bây giờ.

Tuy nhiên, tôi hoàn toàn không nhận được tài liệu chính thức. 'div.navigation' và '#content div.post' là gì? Họ nên làm gì trong trường hợp của tôi?

Snippet Từ Tài liệu:

$('#content').infinitescroll({ 

    navSelector : "div.navigation",    
        // selector for the paged navigation (it will be ?>hidden) 
    nextSelector : "div.navigation a:first",  
        // selector for the NEXT link (to page 2) 
    itemSelector : "#content div.post"   
        // selector for all items you'll retrieve 
}); 

Chỉnh sửa: My Javascript So Far

$(document).ready(function() { 
(function() { 
    var loading_options = { 
     finishedMsg: "<div class='end-msg'>Congratulations! You've reached the end of the internet</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.navigation a:first", 
     itemSelector: "#content div.item" 
    }); 
}); 
}); 

Các [< [1] 2] 3]>] phần được tạo ở cuối trang nhưng cuộn vô hạn không hoạt động. Ngoài ra, tôi không nhận được nhật ký hoặc lỗi trong bảng điều khiển.

Answer 1

Trước tiên, bạn cần phải thêm pagination bản thân như thế này sau khi đóng cửa #content div:

{!! $posts->render() !!} 

chí này ra cái gì đó như:

<ul class="pagination"><li><a>...</a></li> 

Để ghi đè lên người dẫn chương trình pagination có một cái nhìn tại this answer on SO .

Sau đó, cấu hình của bạn trông như thế này:

$(document).ready(function() { 
    var loading_options = { 
     finishedMsg: "<div class='end-msg'>Congratulations! You've reached the end of the internet</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 a:first", 
     itemSelector: "#content div.item" 
    }); 
}); 

Về cơ bản, cuộn vô hạn sẽ gọi các liên kết pagination cho bạn và do đó cần phải biết, nơi tất cả mọi thứ nằm để đặt nó tất cả cùng nhau.