Handling paging

For our last task we'll look at wiring up the paging elements we added earlier. The Stack Exchange API makes it easy to get results in a paged format, so we can leverage that to our advantage.

The trade-off for requesting all available data from Stack Exchange, saving ourselves that massive one-off hit, is that we make much smaller requests in response to the user initiating a request for more data.

Engage Thrusters

Directly after the click handler we added for the <li> elements inside the Listview, add the following code:

$("a[data-icon='forward'], a[data-icon='back']").on("click", function () {

    var button = $(this),
        dir = button.attr("data-icon"),
        page = parseInt($("span.num").eq(0).text(), 10);

    if (dir === "forward") {
        page++;
    } else {
        page--;
    }

    getBounties(page, function (newData) {

        data = newData;
        data.currentPage = page;
        localStorage.setItem("res", JSON.stringify(newData));

        $...