How to properly create pagination with knockout.js component?

Question

I'm working on building a component for a current and future projects that handles pagination on a knockout component level. I've based the idea on the accepted answer from here. Also reference the Knockout component page here.

Here is my component thus far. I am having trouble getting Any of the data to actually display, let alone with a dynamic table heading.

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 = 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: 
    ' \
        Display Table headers and data here 
\
         \
    \
    \
    \
        \
            \
                «\
            \
        \
         \
         \
         \
        \
        \
        \
            \
                »\
            \
        \
    \
\
'
})

This is how the component would be called:

CustomerList would look like:

[
  {FirstName: "John", Email: "John@example.com"},
  {FirstName: "Steve", Email: "Steve@example.com"},
  {FirstName: "Jim", Email: "Jim@example.com"}
]

What variables or context am I missing to access Items keys/values?

Extra Notes. I do not have any required form of data as I can manipulate it without consequence.

John Pavek · Accepted Answer

Alright. It took me 6 months to figure this out. But hopefully someone else will find this as valuable as I have.

The trick I found was not to use a component, but rather a template for only the HTML. Though I guess a component might work too.

Below is code for a view model for pagination and a small example of how it works. It only requires 1 input, an array, and then you simply bind the PerPage, and bind the output, PaginatedArray, and tah dah.

function MainViewModel() {
  var self = this;

  self.ListOfStuff = ko.observableArray();

  self.Pagination = ko.observable(new PaginationVM(self.ListOfStuff));

  self.PopulateArray = function() {
    for (var i = 0; i < 100; i++) {
      self.ListOfStuff.push("Item " + i);
    }
  }
  self.PopulateArray();
}


function PaginationVM(input) {
  var self = this;
  self.InputArray = input;
  self.PerPage = ko.observable();
  self.Page = ko.observable(1);

  self.PageTotal = ko.computed(function() {
    var totalPages = Math.ceil(self.InputArray().length / parseInt(self.PerPage()));
    if (self.Page() > totalPages && totalPages > 0) {
      self.Page(totalPages);
    }
    return totalPages
  })

  self.PaginatedArray = ko.computed(function() {
    var perPage = parseInt(self.PerPage())
    var start = self.Page() * perPage - perPage;
    return self.InputArray().slice(start, start + perPage);
  })

  self.ChangePageBy = function(offset) {
    return function() {
      self.Page(self.Page() + offset);
    }
  }

  self.ChangePageTo = function(newPage) {
    return function() {
      switch (newPage) {
        case "last":
          self.Page(self.PageTotal());
          break;
        case "first":
          self.Page(1);
          break;
        default:
          self.Page(newPage);
      }
    }
  }
}


ko.applyBindings(new MainViewModel());

How to properly create pagination with knockout.js component?

Answers (1)

Related Questions