How to handle pagination with Knockout

Question

I have a div that is setup to bind to a `observeableArray` ,but I only want to show at most 50 items from that `observeableArray` at any given time. I want to handle this with pagination with a previous and next button along with indices on the page to allow users to cycle through pages of items from the collection. I know I could probably do this with a `computedObservable` and a custom data binding but I'm not sure how to do it (I'm still a Knockout neophyte). Can anyone point me in the right direction? Here is my code (the JS is in TypeScript): ```

<%= if params[:q] render 'active_search.html.erb' else render 'passive_search.html.erb' end %> <%= form_tag("/search", method: "get", :class => "form-search form-inline") do %> <%= label_tag(:q, "Search for:") %> <%= text_field_tag(:q, nil, class:"input-medium search-query") %> <%= submit_tag("Search", :class=>"btn") %> <% end %>

Accepted Answer

Pagination is quite simple with Knockout. I would personally achieve it this way:

- Have an observableArray containing all your elements

- Have an observable containing the current page (initialized to 0)

- Have a variable declaring the number of elements per page

- Have a computed that returns the number of pages, calculated thanks to the number of elements per page and the total number of elements.

- Finally, add a computed that slices the array containing all the elements.

Given that, you can now add a function that increments (next) or decrements (previous) the current page.

Here is a quick example:

```
var Model = function() {
    var self = this;
    this.all = ko.observableArray([]);
    this.pageNumber = ko.observable(0);
    this.nbPerPage = 25;
    this.totalPages = ko.computed(function() {
        var div = Math.floor(self.all().length / self.nbPerPage);
        div += self.all().length % self.nbPerPage > 0 ? 1 : 0;
        return div - 1;
    });

this.paginated = ko.computed(function() {
        var first = self.pageNumber() * self.nbPerPage;
        return self.all.slice(first, first + self.nbPerPage);
    });

this.hasPrevious = ko.computed(function() {
        return self.pageNumber() !== 0;
    });

this.hasNext = ko.computed(function() {
        return self.pageNumber() !== self.totalPages();
    });

this.next = function() {
        if(self.pageNumber() < self.totalPages()) {
            self.pageNumber(self.pageNumber() + 1);
        }
    }

this.previous = function() {
        if(self.pageNumber() != 0) {
            self.pageNumber(self.pageNumber() - 1);
        }
    }
}
```

You'll find a simple and complete example here: http://jsfiddle.net/LAbCv/ (might be a bit buggy, but the idea is there).

How to handle pagination with Knockout

Solution

Problem