Home

ko.pager Documentation

The following steps describe an example use of ko.pager.js using Knockout (ofcourse), jQuery and Bootstrap for the css styling of the example and pager.

Basic setup

Create an html file, we name it example.html. Add basic html/head tags as you like and reference the libraries we want to use.

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/knockout-2.2.0.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet">

and a reference to ko.pager.js

<script src="js/ko.pager.js" type="text/javascript"></script>

The template

In this example we use bootstrap to style the pager. Most javascript properties are used in this template to either show or set values. All properties are knockout observables or computed observables.

Here is a basic working template used in our example:

<script type="text/html" id="tpl-pager">
    <div class="pagexofx">
        <span data-bind="text: FirstItemIndex"></span>
        -
    <span data-bind="text: LastItemIndex"></span>
        van
    <strong>
        <span data-bind="text: TotalItemCount"></span>
    </strong>
        resultaten
    </div>
    <ul>
        <!-- ko if:CurrentPage() === 1 -->
        <li class="disabled">
            <a href="#" class="disabledPage">&laquo;&laquo;</a></li>
        <!-- /ko -->
        <!-- ko ifnot:CurrentPage() === 1 -->
        <li>
            <a href="#" data-bind="click: function(){ CurrentPage(1); }">&laquo;&laquo;</a></li>
        <!-- /ko -->
        <!-- ko if:HasPrevPage -->
        <li>
            <a href="#" data-bind="click: function(){ CurrentPage(CurrentPage() - 1); }">&laquo;</a></li>
        <!-- /ko -->
        <!-- ko ifnot:HasPrevPage -->
        <li class="disabled">
            <a href="#" class="disabledPage">&laquo;</a></li>
        <!-- /ko -->
        <!-- ko foreach:Pages -->
        <!-- ko if:$data === $parent.CurrentPage() -->
        <li class="active">
            <span class="currentPage" data-bind="text: $data"></span>
        </li>
        <!-- /ko -->
        <!-- ko if:$data !== $parent.CurrentPage() -->
        <li>
            <a href="#" data-bind="text: $data, click: function(){ $parent.CurrentPage($data); }"></a>
        </li>
        <!-- /ko -->
        <!-- /ko -->
        <!-- ko if:HasNextPage -->
        <li>
            <a href="#" data-bind="click: function(){ CurrentPage(CurrentPage() + 1); }">&raquo;</a></li>
        <!-- /ko -->
        <!-- ko ifnot:HasNextPage -->
        <li class="disabled">
            <a href="#" class="disabledPage">&raquo;</a></li>
        <!-- /ko -->
        <!-- ko ifnot:CurrentPage() === LastPage() -->
        <li>
            <a href="#" data-bind="click: function(){ CurrentPage(LastPage()); }">&raquo;&raquo;</a></li>
        <!-- /ko -->
        <!-- ko if:CurrentPage() === LastPage() -->
        <li class="disabled">
            <a href="#" class="disabledPage">&raquo;&raquo;</a></li>
        <!-- /ko -->
    </ul>
</script>

Include this template in your page so we can reference it whenever we want to render it.

Display the pager

Show the pager like this:

    <!-- ko ifnot:Pager().TotalItemCount() > 0 -->
    <p>
        No results found
    </p>
    <!-- /ko -->
    <!-- ko if:Pager().TotalItemCount() > 0 -->
    <div class="pagination" data-bind="template:{ name: 'tpl-pager', data: Pager }">
    </div>
    <!-- /ko -->

This assumes you have named your pager variable on your viewmodel to 'Pager'.

Add your own

In this example we don't show how to do ajax calls or render a grid based on server results. Add whatever fits best.

To demonstrate the pager we allow you to configure its properties trough some form fields.

A small snippet:

    <div class="control-group">
        <label class="control-label" for="PageSize">PageSize</label>
        <div class="controls">
            <input type="text" id="PageSize" data-bind="value: Pager().PageSize">
            <p>
                Define page size for correct calculation. Defaults to <strong>10</strong>.
            </p>
        </div>
    </div>

TODO...

Create a pager in your viewmodel

Setting result item count

Pager properties