Dynamic Pagination With Ajax

In this post, I'm going to explain how to build a dynamic next page button that fires when clicked, requesting additional data from a back-end service via AJAX. 

Let's dive in by building the button. We will add an onClick trigger that calls a function, passing through a variable called lastPage. When this variable is equal to the lastPage stored in our controller, we will hide the button so that the user cannot request additional information. We'll also add a class so we can easily hide it when necessary. Finally we'll use an empty div with the class of "next-page-content" as a placeholder for some data to come later.

<div class="load-more-button" onClick="loadMore(lastPage)">Load More</div>
<div class="next-page-content"></div>

In a script tag, let's build our function. But before we do so, we'll instantiate an incrementor which goes up by 1 each time the button is clicked. 

When the function is called it goes to the url /next-page, sending through AJAX data such as the current page and the url. We can get the current URL using javascript's window functionality, asking for window.location.pathname.toString(). 

When the function succeeds, it will receive a response in the form of a JSON object and we will append it to the page. If the last page has been reached, we can also hide the button.

Finally, we increment the variable i, so that it is ready for the next request.

var i = 1;
function loadMore(lastPage) {
    console.log(i);
    $.ajax({
        url: "/next-page",
        data: {
            page: i,
            url: window.location.pathname.toString()
        }
    })
    .done(function (response) {
        console.log(response);
        $('.next-page-content').append(response);
        if (i == lastPage - 1) {
            $('.load-more-button').hide();
        }
        i++;
    })
    .fail(function () {
        console.log("error");
    });
}

At this point you can check out the AJAX call being sent using your browser's development tools. In the network tab, we can see the request being sent, as well as the url parameters attached to it: page and url.

Now it is time to decide what to do behind the scenes when the URL /next-page gets hit. My response is built using Laravel on the back-end, so I have constructed a controller to handle the route. 

It will fetch some additional articles from a back-end service, then use View::make to return a partial based on the data that is passed through. Notice how we can easily obtain the page number from the query parameter using $request->input.

public function moreArticles(SolrApi $solrApi, Request $request) {
        $pageNumber = $request->input('page');
        $articles = $solrApi->getArticles($pageNumber);
        return View::make('/partials/homePage/latest-news')->with(['articles' => $articles]);
}

Using View::make, the response from the AJAX call is just some raw HTML ready to be rendered on the page. 

The last step is to render this data on the page. This takes part in two steps. 

First, in the Javascript code we call $('.next-page-content').append(response);. This targets the empty div we created in the first step and adds the HTML visible in the screenshot above. 

Second, we compare the value of iterator to the value of last page, which is passed from the controller. If we have reached the last page, our load more button disappears using $('.load-more-button').hide();

That's all for now! Any questions or comments, please let me know below.