Knockout JS as we know is a highly versatile JavaScript library that helps us implement the MVVM pattern on the client by providing us with two way data binding and templating capabilities. Today we will use Knockout JS and JSON data to build a pager.
Paging is method the break large data in piece of number of records, which is know as page size. The major component of the Paging are
- Previous
- Next
- Pages
- Page Size
- Current Page Index
- Max Page size
- A list with required pages
So for creation in paging in knockout JS we have to declare certain observables and observable arrays as follows:
- allPages = ko.observableArray(), // it will have all the information with all the required records
- pageIndex = ko.observable(1) //Current page index
- pageSize = ko.observable(10) //Can be configured as required for page size
- pageCount = ko.observable()
- maxPageIndex = ko.observable() //Maximum index
Now we have to add some methods for next, previous, move to current ;page etc.
- First method is move next
nextPage = function () {
if (pageIndex() < maxPageIndex()) {
pageIndex(pageIndex() + 1);
updatePageIndex(pageIndex());
}
}
- Second is move to previous
previousPage = function () {
if (pageIndex() > 0) {
pageIndex(pageIndex() - 1);
// your code for array updation
updatePageIndex(pageIndex());
}
},
- Third is move to current page
moveToPage = function (index) {
pageIndex(index);
// your code for array updation
updatePageIndex(index);
},
- Fourth for making the page size to 5 and middle logic
updatePageIndex = function (index) {
if (index != 1 && index != 2 && index != maxPageIndex() && index != maxPageIndex() - 1) {
allPages([]);
allPages.push({ pageNumber: (index - 2) })
allPages.push({ pageNumber: (index - 1) })
allPages.push({ pageNumber: (index) })
allPages.push({ pageNumber: (index + 1) })
allPages.push({ pageNumber: (index + 2) })
}
else if (index == maxPageIndex() && index > 5) {
allPages([]);
allPages.push({ pageNumber: (index - 4) })
allPages.push({ pageNumber: (index - 3) })
allPages.push({ pageNumber: (index - 2) })
allPages.push({ pageNumber: (index - 1) })
allPages.push({ pageNumber: (index) })
}
},
- Fifth one for updating the pagesize when any index is clicked
allPages([]);
pageCount = Math.ceil(totalRequestCount() / pageSize());
maxPageIndex(pageCount);
if (pageCount < 6) {
for (var i = 0; i < pageCount; i++) {
allPages.push({ pageNumber: (i + 1) })
}
}
else if (pageCount >= 6) {
for (var i = 0; i < 5; i++) {
allPages.push({ pageNumber: (i + 1) })
}
}
Now we have need of HTML, which will consume/bind all above variables and methods
<div style="width: 850px; text-align: center; margin: auto;" >
<div style="">
<ul class="pagination">
<li><a href="#">
<img src="/images/arrow-start.png" width="26" height="25" data-bind=" disable : ( $root.paging.pageIndex() == 1),click: $root.paging.previousPage" /></a> </li>
</ul>
<ul class="pagination paginationMargin" style="margin:0px;" data-bind="foreach: $root.paging.allPages">
<li data-bind="css: { active: $data.pageNumber === ($root.paging.pageIndex()) }"><a href="#" data-bind=" text: $data.pageNumber, click: function () { $root.paging.moveToPage($data.pageNumber); }"></a></li>
</ul>
<!-- ko if: (($root.paging.maxPageIndex() != $root.paging.pageIndex()) && ($root.paging.maxPageIndex()-2 != $root.paging.pageIndex()) && ($root.paging.maxPageIndex()-1 != $root.paging.pageIndex()) && ($root.paging.maxPageIndex() > 5))-->
<ul class="pagination paginationMargin">
<li><a href="#">......</a> </li>
<li><a href="#" data-bind="text: $root.paging.maxPageIndex(), click: function () { $root.paging.moveToPage($root.paging.maxPageIndex()); }">......</a> </li>
</ul>
<!-- /ko -->
<ul class="pagination">
<li><a href="#" >
<img src="/images/arrow-end.png" width="26" height="25" data-bind="disable : ($root.paging.pageIndex() == $root.paging.maxPageIndex()) ,click: $root.paging.nextPage" /></a> </li>
</ul>
</div>
Well above HTML have some classes which you have to add your self, I have just given the name of that or you can use any other styles also from searching the paging template available from Google. After above JavaScript code and HTML the paging will look like in a page as below :
