How to handle pagination with Knockout
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).
Actually I am working on a website, which has a lot of tables (most of them need paging).
So actually, I needed some reusable-component
for paging to use it in all the cases which I need paging.
Also, I needed more advanced features than which provided in the accepted answer to this question.
So I developed my own component to solving this issue, here it is.
And for more details, continue reading (Please consider to take the code from GitHub, not from here, as the GitHub code was updated and enhanced since I put it here)
JavaScript
function PagingVM(options) { var self = this; self.PageSize = ko.observable(options.pageSize); self.CurrentPage = ko.observable(1); self.TotalCount = ko.observable(options.totalCount); self.PageCount = ko.pureComputed(function () { return Math.ceil(self.TotalCount() / self.PageSize()); }); self.SetCurrentPage = function (page) { if (page < self.FirstPage) page = self.FirstPage; if (page > self.LastPage()) page = self.LastPage(); self.CurrentPage(page); }; self.FirstPage = 1; self.LastPage = ko.pureComputed(function () { return self.PageCount(); }); self.NextPage = ko.pureComputed(function () { var next = self.CurrentPage() + 1; if (next > self.LastPage()) return null; return next; }); self.PreviousPage = ko.pureComputed(function () { var previous = self.CurrentPage() - 1; if (previous < self.FirstPage) return null; return previous; }); self.NeedPaging = ko.pureComputed(function () { return self.PageCount() > 1; }); self.NextPageActive = ko.pureComputed(function () { return self.NextPage() != null; }); self.PreviousPageActive = ko.pureComputed(function () { return self.PreviousPage() != null; }); self.LastPageActive = ko.pureComputed(function () { return (self.LastPage() != self.CurrentPage()); }); self.FirstPageActive = ko.pureComputed(function () { return (self.FirstPage != self.CurrentPage()); }); // this should be odd number always var maxPageCount = 7; self.generateAllPages = function () { var pages = []; for (var i = self.FirstPage; i <= self.LastPage() ; i++) pages.push(i); return pages; }; self.generateMaxPage = function () { var current = self.CurrentPage(); var pageCount = self.PageCount(); var first = self.FirstPage; var upperLimit = current + parseInt((maxPageCount - 1) / 2); var downLimit = current - parseInt((maxPageCount - 1) / 2); while (upperLimit > pageCount) { upperLimit--; if (downLimit > first) downLimit--; } while (downLimit < first) { downLimit++; if (upperLimit < pageCount) upperLimit++; } var pages = []; for (var i = downLimit; i <= upperLimit; i++) { pages.push(i); } return pages; }; self.GetPages = ko.pureComputed(function () { self.CurrentPage(); self.TotalCount(); if (self.PageCount() <= maxPageCount) { return ko.observableArray(self.generateAllPages()); } else { return ko.observableArray(self.generateMaxPage()); } }); self.Update = function (e) { self.TotalCount(e.TotalCount); self.PageSize(e.PageSize); self.SetCurrentPage(e.CurrentPage); }; self.GoToPage = function (page) { if (page >= self.FirstPage && page <= self.LastPage()) self.SetCurrentPage(page); } self.GoToFirst = function () { self.SetCurrentPage(self.FirstPage); }; self.GoToPrevious = function () { var previous = self.PreviousPage(); if (previous != null) self.SetCurrentPage(previous); }; self.GoToNext = function () { var next = self.NextPage(); if (next != null) self.SetCurrentPage(next); }; self.GoToLast = function () { self.SetCurrentPage(self.LastPage()); };}
HTML
<ul data-bind="visible: NeedPaging" class="pagination pagination-sm"> <li data-bind="css: { disabled: !FirstPageActive() }"> <a data-bind="click: GoToFirst">First</a> </li> <li data-bind="css: { disabled: !PreviousPageActive() }"> <a data-bind="click: GoToPrevious">Previous</a> </li> <!-- ko foreach: GetPages() --> <li data-bind="css: { active: $parent.CurrentPage() === $data }"> <a data-bind="click: $parent.GoToPage, text: $data"></a> </li> <!-- /ko --> <li data-bind="css: { disabled: !NextPageActive() }"> <a data-bind="click: GoToNext">Next</a> </li> <li data-bind="css: { disabled: !LastPageActive() }"> <a data-bind="click: GoToLast">Last</a> </li></ul>
Features
Show on need
When there is no need for paging at all (for example the items which need to display less than the page size) then theHTML
component will disappear.
This will be established by statementdata-bind="visible: NeedPaging"
.Disable on need
for example, if you are already selected the last page, why thelast page
or theNext
button should be available to press?
I am handling this and in that case I am disabling those buttons by applying the following bindingdata-bind="css: { disabled: !PreviousPageActive() }"
Distinguish the Selected page
a special class (in this case calledactive
class) is applied on the selected page, to make the user know in which page he/she is right now.
This is established by the bindingdata-bind="css: { active: $parent.CurrentPage() === $data }"
Last & First
going to the first and last page is also available by simple buttons dedicated to this.Limits for displayed buttons
suppose you have a lot of pages, for example, 1000 pages, then what will happen? would you display them all for the user? absolutely not you have to display just a few of them according to the current page. for example, showing 3 pages before and other 3 pages after the selected page.
This case has been handled here<!-- ko foreach: GetPages() -->
theGetPages
function applying a simple algorithm to determine if we need to show all the pages (the page count is under the threshold, which could be determined easily), or to show just some of the buttons.
you can determine the threshold by changing the value of themaxPageCount
variable
Right now I assigned it as the followingvar maxPageCount = 7;
which mean that no more than 7 buttons could be displayed for the user (3 before the SelectedPage, and 3 after the Selected Page) and the Selected Page itself.
You may wonder, what if there were not enough pages after OR before the current page to display? do not worry I am handling this in the algorithm
for example, if you have11 pages
and you havemaxPageCount = 7
and the currentselected page is 10
, Then the following pages will be shown5,6,7,8,9,10(selected page),11
so we always stratifying themaxPageCount
, in the previous example showing5
pages before the selected page and just1
page after the selected page.Selected Page Validation
All set operation for theCurrentPage
observable which determine the selected page by the user, is going through the functionSetCurrentPage
. In only this function we set this observable, and as you can see from the code, before setting the value we make validation operations to make sure that we will not go beyond the available page of the pages.Already clean
I use onlypureComputed
notcomputed
properties, which means you do not need to bother yourself with cleaning and disposing of those properties. Although, as you will see in the example below, you need to dispose of some other subscriptions which are outside of the component itself
NOTE 1
You may notice that I am using some bootstrap
classes in this component, This is suitable for me, but , of course, you can use your own classes instead of the bootstrap classes.
The bootstrap classes which I used here are pagination
, pagination-sm
, active
and disabled
Feel free to change them as you need.
NOTE 2
So I introduced the component for you, It is time to see how it could work.
You would integrate this component into your main ViewModel as like this.
function MainVM() { var self = this; self.PagingComponent = ko.observable(new Paging({ pageSize: 10, // how many items you would show in one page totalCount: 100, // how many ALL the items do you have. })); self.currentPageSubscription = self.PagingComponent().CurrentPage.subscribe(function (newPage) { // here is the code which will be executed when the user changes the page. // you can handle this in the way you need. // for example, in my case, I am requesting the data from the server again by making an ajax request // and then updating the component var data = /*bring data from server , for example*/ self.PagingComponent().Update({ // we need to set this again, why? because we could apply some other search criteria in the bringing data from the server, // so the total count of all the items could change, and this will affect the paging TotalCount: data.TotalCount, // in most cases we will not change the PageSize after we bring data from the server // but the component allows us to do that. PageSize: self.PagingComponent().PageSize(), // use this statement for now as it is, or you have to made some modifications on the 'Update' function. CurrentPage: self.PagingComponent().CurrentPage(), }); }); self.dispose = function () { // you need to dispose the manual created subscription, you have created before. self.currentPageSubscription.dispose(); }}
Last but not least, Sure do not forget to change the binding in the HTML component according to your special viewModel, or wrap all the component with the with binding
like this
<div data-bind="with: PagingComponent()"> <!-- put the component here --></div>
Cheers
I have created a blogpost with detailed explanation on how to create pagination with the help of a little JQuery plugin (here).
Basically, I have used normal knockout data binding with AJAX and after data has been retrieved from the server, I call the plugin. You can find the plugin here. It's called Simple Pagination.