Laravel显示更多按钮

Question

I do have two laravel collections

$posts = collect($instagramService->fetchPosts('username'))->take(10); 

and some more posts

$morePosts =  collect($instagramService->fetchPosts('username'))->slice(10);

I am displaying first collection on a blade:

@foreach($posts as $post)
   {{$post->url}}
   {{$post->likes}}
@endforeach

<button type="submit">Show More</button>

I am trying to research an ajax pagination but no luck so far, so if someone could help me here would be highly appreciated.

Question: when I click "Show More" I want to load the second collection?

Answer 1

button

<button type="submit" class="clickMe">Show More</button>

ajax

       $(".clickMe").click(function(){
    $.ajax({
            dataType: 'json',
            type:'GET',
            url: "{{ url('morePosts') }}",
          }).done(function(data){
             var len=data.length
console.log(len);
    //Perform ANy action after successfuly post data
      var rows = '';
for(i=0;i<data.length;i++){
      rows = rows + 'data[i].url'
}      
 $("#morePosts").html(rows);  
        });

Route

 Route::get('/morePosts', 'PostController@morePosts');

method in controller

public function morePosts(){
   $data=  collect($instagramService->fetchPosts('username'))->slice(10);
return response()->json($data);
}

html

<div id="morePosts">
</div>