http://stackoverflow.com/questions/43214985/how-to-properly-create-pagination-with-knockout-js-component

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div data-bind="component: { name: 'jPage', params: { Items: CustomerList(), PerPage: 1} }">

JavaScript

var viewModel = function(){
	var self = this;
  this.CustomerList = ko.observableArray([
    {FirstName: "John", Email: "[email protected]"},
    {FirstName: "Steve", Email: "[email protected]"},
    {FirstName: "Jim", Email: "[email protected]"}
	]);
}

ko.components.register("jPage", {
viewModel: function (params) {
    var self = this;
    self.Items = params.Items;
    self.Keys = Object.keys(self.Items);
    self.PerPage = params.PerPage;
    self.Page = ko.observable(1);
    self.PagesTotal = Math.ceil(self.Items.length / self.PerPage);

    self.ItemsVisible = ko.computed(function () {
        first = (self.Page() * self.PerPage) - self.PerPage;
        return self.Items.slice(first, first + self.PerPage);
    })

    self.ChangePage = function (_page) {
        if (_page < 1 || _page > self.PagesTotal) return;
        this.Page(_page);
    }.bind(this);


},
template: 
    '<div data-bind="foreach: ItemsVisible"> \
        Display Table headers and data here <br>\
        <span data-bind="text: $data[0]"> </span>\
    </div>\
    <nav aria-label="Page navigation">\
    <ul class="pagination">\
        <li data-bind="css:{disabled: Page() <= 1} ">\
            <a aria-label="Previous" data-bind="click: ChangePage( Page() - 1 )">\
                <span aria-hidden="true">&laquo;</span>\
            </a>\
        </li>\
        <li><a data-bind="text: Page() -2, click: ChangePage( Page() - 2 ), visible: Page() > 2 "> </a></li>\
        <li><a data-bind="text: Page() -1, click: ChangePage( Page() - 1 ), visible: Page() > 1 "> </a></li>\
        <li class="active"><a data-bind="text: Page"> </a></li>\
        <li><a data-bind="text: Page() +1, click: ChangePage( Page() + 1 ), visible: (PagesTotal > Page() +0) "></a></li>\
        <li><a data-bind="text: Page() +2, click: ChangePage( Page() + 2 ), visible: (PagesTotal > Page() +1)"></a></li>\
        <li data-bind="css: {disabled: (PagesTotal < Page() )}">\
            <a aria-label="Next" data-bind="click:...