一般分頁機制，是每換下一頁就向server請求下一頁，
把整頁的所有元素重傳一次，
透過knockout.js把一次傳來的列表，
做成分頁瀏覽。
在 knockout.js 有個現成的 simpleGrid 可以很快地實作出簡單的分頁功能
http://knockoutjs.com/examples/resources/knockout.simpleGrid.1.3.js
以參加這次鐵人賽的名單為資料並以JSON格式寫在 data.js，
資料內容類似像這樣：

var i5data = [{"username":"toithome","type":"tech","subject":"虛擬化產品使用經驗談"},{"username":"twtw","type":"tech","subject":"建立API為中心的輕量級網站"}];

在HTML的view裡實在是太簡化了，

<div data-bind="simpleGrid: gridViewModel"></div>
<button data-bind="click:toFirstPage">回第一頁</button>
<script src="/js/knockout.simpleGrid.1.3.js" type="text/javascript"></script>
<script src="/data.js" type="text/javascript"></script>

其中data.js內容是JSON格式的資料。
剩下的是程式碼的ViewModel部份：

var viewModel = function(items) {
  var self = this;
  self.items = ko.observableArray(items);
  self.toFirstPage = function() {
    self.gridViewModel.currentPageIndex(0);
  };
  self.gridViewModel = new ko.simpleGrid.viewModel({
    data: self.items,
    columns: [
      { headerText: '帳號', rowText: 'username' },
      { headerText: '組別', rowText: 'type' },
      { headerText: '主題', rowText: 'subject' }
    ],
    pageSize: 10
  });
};

ko.applyBindings(new viewModel(i5data));

其中 ko.simpleGrid.viewModel 比較不易了解，
需參看 knockout.simpleGrid.1.3.js 的內容。
此為看起來的樣子：

這實作的網址在：
http://i5.tagbible.net/paginate.html

系列文章列表