Infinite scroll pagination on Laravel 5

Take a look here at this Stack Overflow question. You might be able to find a little more about that implementation here

But, in a nutshell, you'd need to call the paginate() method and then use a library like the ones below to get the next page of results.

• http://getfuelux.com/javascript.html#infinite-scroll
• https://github.com/infinite-scroll/infinite-scroll

There are a tonne of ways you can do this. I'd say, give one a go, see how you get on, if you get stuck then ask questions. Be specific and try and stick to the Guidelines for posting on Laracasts.com :)

@mstnorris you don't need entire Javascript library to make infinite scroll. The concept is simple, using the Laravel paginate and a tiny bit of JS & css to check for user's scrolling event you can simply then do something like so:

   // example in angular 
  // Wrap Api calls in a Javascript timeout function to avoid repetitive API calls
  $timeout(function () { 
               $http.get(apiURL + '/pages?page=' + $scope.pageNumber).success(function (items) {
                   if(items.length == 0){
                      // :( no more articles
                   }else{
                       // Great we have more articles
                        $scope.articles = items .........
                   }
               });
               $scope.pageNumber += 1;  increments after every call
        }, 1000);
 

but make this code with even Vue resource

// or in jQuery
var pageNumber = 1;
var articles;
$.ajax({
    type : 'GET',
    url: "apiURL + '/pages?page=' + pageNumber",
    success : function(data){
        pageNumber +=1;
               if(data.length == 0){
                  // :( no more articles
               }else{
                   // Great we have more articles
                    articles = items .........
               }
    },error: function(data){
                                                  
    },
})     

@mstnorris the link you give is a really great help. however, i still can't make it work since i think its not working for laravel 5.

LINE 32 http://laravel.io/bin/qQLk6#24,32,44 
//nextSelector - this will look for the automatically created {{$data->links()}} 

however on laravel 5, links() seems not working anymore. its $data->render()

do you happen to know where i could change this {{$data->links()}} so that i will overwrite it with $data->render() ?

@mehany thank you for your suggestion, however, i am not that advance yet, i think im confuse with your code.

@techykiddo if you know AngularJS then you should not be confused. Are you using jQuery or just plain JS?

@mehany i have no experience yet with angularJS. im just using jquery and plain js.

ok np.. you can do the same thing in jQuery .. I updated my answer!

@mehany how can i call my collection and append it to the current one and to trigger it while user scroll?

var pageNumber = 1;
var articles;
$.ajax({
    type : 'GET',
    url: "http://localhost:8000 + '/pages?page=' + pageNumber",
    success : function(data){
        pageNumber +=1;
               if(data.length == 0){
                  // :( no more articles
               }else{
                   // Great we have more articles
                    articles = items .........
               }
    },error: function(data){
                                                  
    },
})     

i am currently looping the collection like this

<div class="content">
    @foreach ($articles as $article)
        <h1> {{  $article->title }}</h1>
        <p> {{ $article->excerpt }} </p>
    @endforeach
</div>

@techykiddo with some jQuery functions like .scroll() and .append()

 url: "http://localhost:8000 + '/example?page=' + pageNumber",

In the ajax success function, you can pass the JS code to handle appending the new set of results. This may be JSON where you will generate the HTML on the fly on the front-end or It could be small blade partials that you prepare specially for this job. This way you can just append the response (data)

@mehany thats what im confused. im using laravels paginate method

    public function articles()
       {    
        return Article::paginate(10);
       }

so it kinda automatically produces url like this

    http://localhost:8000/articles?page=1uptonumberofresults

paginate(10) will return 10 rows from your database, for each page, until there are no more results. So you do articles?page=1 articles?page=2

return Article::paginate(10);

Here, see it in action

https://laracasts.com/discuss/?page=2

https://laracasts.com/discuss/?page=3

https://laracasts.com/discuss/?page=4

@techykiddo let me know how it goes!

@mehany I'm not a big fan of JavaScript frameworks (I guess because I've never really looked into them). I've tried jQuery but I don't like manipulating the DOM like that. Angular and React are a little better although still not quite what I want. I'm loving the series on Vue.js at the moment though as it looks like they are on the right track. In all honesty I'm not that familiar with any one of them to give a backed up opinion; which is why I linked to the resources for implementation with jQuery because most people would have heard of it if they weren't already using it.

I'll certainly try out your Vanilla JS implementation with Vue! Thank you for that.

@techykiddo let me know how you get on with whichever method you go with :)

Hey @mstnorris thanks for your input! MVC or MVVC front-end frameworks are so much fun and easily maintainable. For the scope of the question, I believe some simple JQuery & CSS is the ideal solution! I put this simple jsfiddle to illustrate the idea.

Hope that helped!

@mehany that's awesome. I've forked it so I can play around with that later. It will most certainly come in handy when fetching older articles for example.

It is pretty easy to integrate infinite-scrolling with laravel http://wern-ancheta.com/blog/2015/03/01/how-to-implement-scroll-in-laravel/