Managing class names

In this task we can show feedback to the user to describe which page is currently being viewed. We can also disable the Previous or Next links if we're on the first or last page of data. We can do all this using a little bit more script and some simple CSS.

Engage Thrusters

First we need to add another method to our ViewModel, directly after the existing ones in sortable-table.js:

manageClasses: function () {
    var nav = $("#paging").find("nav"),
        currentpage = this.currentPage();

    nav.find("a.active")
       .removeClass("active")
       .end()
       .find("a.disabled")
       .removeClass("disabled"); 

    if (currentpage === 0) {
       nav.children(":first-child").addClass("disabled");
    } else if (currentpage === this.totalPages() - 1) {
        nav.children(":last-child").addClass("disabled");
    }

    $("#pages").find("a")
               .eq(currentpage)
               .addClass("active");
}

We then need to call this method from several places...