Just another Knockout paginator

I know I know, Knockout JS is something considered obsolete, but I loved it, so I decided right to write two posts about it to share some snippets I developed, maybe someone will find it useful. So the first post is about a simple paginator, the first snippet is the core of the paginator and you can put it in a common javascript (eg Custom.Utility.js), as you can see it behaviors as a plugin for knockout.

// Knockout utilities
if (typeof ko !== "undefined") {
 ko.bindingHandlers.fadeVisible = {
  init: function (element, valueAccessor) {
   $(element).fadeIn();
  },
  update: function (element, valueAccessor) {
   // Whenever the value subsequently changes, slowly fade the element in or out
   var value = valueAccessor();
   ko.unwrap(value) ? $(element).fadeIn() : $(element).fadeOut();
  }
 };
 ko.safeObservable = function (initialValue) {
  var result = ko.observable(initialValue);
  result.safe = ko.dependentObservable(function () {
   return result() || {};
  });
  return result;
 };
 ko.Paginator = function (observableValue) {
  var p = new Object();
  p.PageSize = ko.observable(10);
  p.PageIndex = ko.observable(0);
  p.PagesToShowSize = ko.observable(5);
  p.PagedItemsLength = ko.observable(0);
  p.IsVisible = ko.dependentObservable(function () {
   var length = observableValue().length;
   return (length > p.PageSize());
  });
  p.PagedList = ko.dependentObservable(function () {
   var size = p.PageSize();
   var start = p.PageIndex() * size;
   return observableValue().slice(start, start + size);
  });
  p.MaxPageIndex = ko.dependentObservable(function () {
   var l = observableValue().length;
   if (p.PagedItemsLength() !== l) {
    p.PagedItemsLength(l);
    p.PageIndex(0);
   }
   return Math.ceil(p.PagedItemsLength() / p.PageSize()) - 1;
  });
  p.PreviousPage = function () {
   var prev = p.PageIndex() - 1;
   if (p.PageIndex() > 0) {
    p.PageIndex(prev);
    p.MinPageRelativeIndex(prev);
   }
  };
  p.NextPage = function () {
   var next = p.PageIndex() + 1;

   if (p.PageIndex() < p.MaxPageIndex()) {
    p.PageIndex(next);
    p.MinPageRelativeIndex(next);
   }
  };
  p.MinPageRelativeIndex = ko.observable(0);
  p.MaxPageRelativeIndex = ko.dependentObservable(function () {
   var relativeMax = p.MinPageRelativeIndex() + p.PagesToShowSize();

   if (relativeMax > p.MaxPageIndex()) {
    var min = p.MaxPageIndex() - p.PagesToShowSize();
    p.MinPageRelativeIndex(min < 0 ? 0 : min);
    relativeMax = p.MaxPageIndex() + 1;
   }
   return relativeMax;
  });
  p.PagesToShow = ko.dependentObservable(function () {
   var pages = [];
   var minValue = p.MinPageRelativeIndex();
   var maxValue = p.MaxPageRelativeIndex();

   for (i = minValue; i < maxValue; i++) {
    pages.push({ PageNumber: (i + 1) });
   }
   return pages;
  });
  p.MoveToPage = function (index) {
   p.PageIndex(index);
  };
  return p;
 };
}
else {
 console.log("Knockout not imported... cannot decorate with new functions")
}

This second snippet is the declaration of the paginator in the HTML page, as you can see I refer to Custom.ViewModel as the namespace of the javascript. In the DIV class=”items” you are free to implement your preferred view, while in the DIV class=”paginator” you simply have to refer to the correct namespace.

...
  
 





   <<
  


   
   
  


   >>
  

Last but not least this is the initialization all the component in the Knockout controller.

// View model definition
controller.ViewModel = function ViewModel() {
 var vm = this;
 vm.Paginator = ko.Paginator(vm.Items);
 
 ...
};