Pager in Knockout JS without using Paged Grid

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

1. Previous
2. Next
3. Pages
4. Page Size
5. Current Page Index
6. Max Page size
7. 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 :