Adding Previous and Next Links

At this point our page is now only displaying the first 10 items. We need to add an interface that allows the user to navigate to other pages of data. In this task we can add Next and Previous links so that the pages can be viewed in a linear sequence.

Engage Thrusters

We'll start out once again by adding the HTML component of this feature. Directly after the <select> element within the <tfoot> element, add the following new markup:

<nav>
    <a href="#" title="Previous page" 
    data-bind="click: goToPrevPage">&laquo;</a>

    <a href="#" title="Next page" 
    data-bind="click: goToNextPage">&raquo;</a>
</nav>

Next we can add some new methods to our ViewModel. These can go directly after the sort method that we added earlier in sortable-table.js:

totalPages: function () {
    var totalPages = this.elements().length / this.pageSize() || 1;
        return Math.ceil(totalPages);
},
goToNextPage: function (...