Setup

Pager.js depends on KnockoutJS and jQuery. Include either pager.js or pager.min.js. Choose between a naïve history manager (pager.start([id: String])), a history manager based on jQuery hashchange (pager.start([id: String])), a history manager based on History.js (pager.startHistoryJs([id: String])) or write your own.

Naïve history manager

  1. // extend your view-model with pager.js specific data
  2. pager.extendWithPage(viewModel);
  3. // apply the view-model using KnockoutJS as normal
  4. ko.applyBindings(viewModel);
  5. // start pager.js
  6. pager.start();

jQuery Hashchange as history manager

Is the same as the naïve, but you need to include the jQuery hashchange plugin first.
  1. // use #!/ instead of the default #
  2. pager.Href.hash = '#!/';
  3. // extend your view-model with pager.js specific data
  4. pager.extendWithPage(viewModel);
  5. // apply the view-model using KnockoutJS as normal
  6. ko.applyBindings(viewModel);
  7. // start pager.js
  8. pager.start();

History.js as history manager

  1. // Set in the head element
  2. <base href="http://some/url/"/>
  3.  
  4.  
  5. // use HTML5 history
  6. pager.useHTML5history = true;
  7. // use History instead of history
  8. pager.Href5.history = History;
  9. // extend your view-model with pager.js specific data
  10. pager.extendWithPage(viewModel);
  11. // apply the view-model using KnockoutJS as normal
  12. ko.applyBindings(viewModel);
  13. // start pager.js
  14. pager.startHistoryJs();