Pager

by Trae

HTML

<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<div id="test">
  <input type="text" data-bind="value: currentPage">
  <input type="text" data-bind="value: totalItems">
  <input type="button" value="Change" data-bind="click: update"><br />
  Pages: <span data-bind="text: totalPages"></span><br />
  Skip: <span data-bind="text: skip"></span><br />
  Take: <span data-bind="text: pageSize"></span><br />
  Prev: <span data-bind="text: canMovePrev"></span><br />
  Next: <span data-bind="text: canMoveNext"></span><br />
  <div style="width: 100%; height 100%" id="log" data-bind="html: logOutput">

  </div>
</div>

JavaScript

var vm = kendo.observable({
	logOutput: "",
  currentPage: 1,
  pageSize: 10,
  totalItems: 43,
  canMovePrev: function(){
  	return vm.get("currentPage") > 1;
  },
  canMoveNext: function(){
  	return vm.get("currentPage") < vm.totalPages();
  },
  skip: function(){
  	return (vm.get("currentPage") - 1) * vm.get("pageSize");
  },
  totalPages: function(){
  	return _.ceil(vm.get("totalItems")/vm.get("pageSize"));
  },
  update: function(){
  	vm.set("logOutput", "");
    vm.log(vm.totalItems);    
    vm.log(vm.totalPages());
    vm.log(_.range(1, vm.totalPages() + 1, 1));  
  },
	log: function(value) {
  	vm.set("logOutput", vm.get("logOutput") + "<br />" + value);
  }
});

kendo.bind($("#test"), vm);