How to properly create pagination with knockout.js component?

1
2
3
4
5

<div data-bind="foreach: pages">
  <button data-bind="text: $data, click: $parent.goToPage"></button>
</div>
<button data-bind="click: goToPrevious">Previous</button>
<button data-bind="click: goToNext">Next</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

function ViewModel() {
  var self = this;

  self.currentPage = ko.observable(1);
  self.pageSize = 10;
  self.data = ko.observableArray([...]); // your array of data

  self.totalPages = ko.computed(function() {
    return Math.ceil(self.data().length / self.pageSize);
  });

  self.pages = ko.computed(function() {
    var pages = [];
    for (var i = 1; i <= self.totalPages(); i++) {
      pages.push(i);
    }
    return pages;
  });

  self.paginatedData = ko.computed(function() {
    var startIndex = (self.currentPage() - 1) * self.pageSize;
    var endIndex = startIndex + self.pageSize;
    return self.data.slice(startIndex, endIndex);
  });

  self.goToPage = function(page) {
    self.currentPage(page);
  };

  self.goToNext = function() {
    if (self.currentPage() < self.totalPages()) {
      self.currentPage(self.currentPage() + 1);
    }
  };

  self.goToPrevious = function() {
    if (self.currentPage() > 1) {
      self.currentPage(self.currentPage() - 1);
    }
  };
}

ko.applyBindings(new ViewModel());

1
2
3
4

<div data-bind="foreach: paginatedData">
  <div data-bind="text: $data"></div>
</div>
<pagination></pagination>