如何使用KnockoutJS將客戶端分頁添加到表中？

如何使用KnockoutJS添加分頁？如何使用KnockoutJS將客戶端分頁添加到表中？

我當前的代碼是：

//assuming jsondata is a collection of data correctly passed into this function 

myns.DisplayFields = function(jsondata) { 
    console.debug(jsondata); 
    window.viewModel = { 
     fields: ko.observableArray(jsondata), 
     sortByName: function() { //plus any custom functions I would like to perform 
      this.items.sort(function(a, b) { 
       return a.Name < b.Name ? -1 : 1; 
      }); 
     }, 
    }; 

    ko.applyBindings(viewModel); 
}

我的觀點：

<table> 
    <tbody data-bind='template: "fieldTemplate"'></tbody> 
</table> 

<script type="text/html" id="fieldTemplate"> 
{{each fields}} 
    <tr> 
     <td> ${ FieldId }</td> 
     <td>${ Type }</td> 
     <td><b>${ Name }</b>: ${ Description }</td> 
    </tr> 
{{/each}} 
</script>

可能或我使用jQuery，jQuery UI的或其他圖書館？

我見過的KnockoutJS網站爲例：

myModel.gridViewModel = new ko.simpleGrid.viewModel({ 
    data: myModel.items, 
    columns: [ 
     { headerText: "Item Name", rowText: "name" }, 
     { headerText: "Sales Count", rowText: "sales" }, 
     { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } } 
    ], 
    pageSize: 4 
});

但是在那裏我會補充的pageSize我的代碼？這個pageSize如何在內部運行？

來源

2011-05-12 Haroon

基本思想是你有一個~~dependentObservable~~Computed Observables它表示當前頁面中的行並將你的表綁定到它。您將切分整個數組以獲取頁面的行。然後，你有頁面按鈕/鏈接來操縱頁面索引，這會導致依賴的觀察者被重新評估，導致當前行。

基於您的代碼，類似：

var myns = {}; 
myns.DisplayFields = function(jsondata) { 
    var viewModel = { 
     fields: ko.observableArray(jsondata), 
     sortByName: function() { //plus any custom functions I would like to perform 
      this.items.sort(function(a, b) { 
       return a.Name < b.Name ? -1 : 1; 
      }); 
     }, 
     pageSize: ko.observable(10), 
     pageIndex: ko.observable(0), 
     previousPage: function() { 
      this.pageIndex(this.pageIndex() - 1); 
     }, 
     nextPage: function() { 
      this.pageIndex(this.pageIndex() + 1); 
     } 
    }; 

    viewModel.maxPageIndex = ko.dependentObservable(function() { 
     return Math.ceil(this.fields().length/this.pageSize()) - 1; 
    }, viewModel); 

    viewModel.pagedRows = ko.dependentObservable(function() { 
     var size = this.pageSize(); 
     var start = this.pageIndex() * size; 
     return this.fields.slice(start, start + size); 
    }, viewModel); 

    ko.applyBindings(viewModel); 
};

所以，你要讓你的表綁定到pagedRows。

樣品在這裏：http://jsfiddle.net/rniemeyer/5Xr2X/

來源

2011-05-12 13:31:58

謝謝，我認爲我需要更好地研究和理解knockout.js，我認爲最好從一個實際的例子開始直接習慣這個庫，以及:) – Haroon 2011-05-12 14:54:19

maxPageIndex函數不是正確。它應該是：Math.ceil（this.fields（）。length/this.pageSize（）） - 1; – 2011-09-08 12:16:35

謝謝。我看到以前的失敗。更新了答案。 – 2011-09-08 13:16:02