javascript 如何使用 KnockoutJS 将客户端分页添加到表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5975429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use KnockoutJS for adding client side paging to table?
提问by Haroon
How can I add paging with KnockoutJS?
如何使用 KnockoutJS 添加分页？
My current code is:
我目前的代码是：
//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);
}
My view:
我的观点：
<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>
Could or would I use jQuery, jQuery UI or another library?
我可以或会使用 jQuery、jQuery UI 或其他库吗？
I have seen on the KnockoutJS site as an example:
我在 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
});
However where would I add pageSize to my code? How is this pageSize internally being run?
但是，我应该在哪里将 pageSize 添加到我的代码中？这个 pageSize 是如何在内部运行的？
回答by RP Niemeyer
The basic idea is that you have a dependentObservableComputed Observablesthat represents the rows in your current page and bind your table to it. You would slice the overall array to get the rows for the page. Then, you have pager buttons/links that manipulate the page index, which causes the dependentObservable to be re-evaluated resulting in the current rows.
基本思想是您有一个dependentObservableComputed Observables代表当前页面中的行并将您的表绑定到它。您将切片整个数组以获取页面的行。然后，您有操作页面索引的寻呼机按钮/链接，这会导致重新评估dependentObservable，从而产生当前行。
Based on your code, something like:
根据您的代码，类似于：
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);
};
So, you would bind your table to pagedRows.
因此，您会将您的表绑定到pagedRows.
Sample here: http://jsfiddle.net/rniemeyer/5Xr2X/
回答by Remco Ros
Did you achieve what you wanted?
你达到了你想要的吗？
I recently pushed an example of a nice pager using knockout to github.
我最近向 github 推送了一个使用淘汰赛的漂亮寻呼机示例。
See https://github.com/remcoros/ko.pagerfor the source and http://remcoros.github.com/ko.pager/example.htmlfor a working example.
请参阅https://github.com/remcoros/ko.pager的源代码和http://remcoros.github.com/ko.pager/example.html的工作示例。
All computations and some convenient properties are provided by the 'Pager' class, which you can create and bind to. An example working template is included.
所有计算和一些方便的属性都由“Pager”类提供，您可以创建和绑定到它。包括一个示例工作模板。
See the source example.html for some doc and usage.
有关一些文档和用法，请参阅源 example.html。
回答by cburgmer
Maybe https://github.com/addyosmani/backbone.paginatoris something for you? From the Github page:
也许https://github.com/addyosmani/backbone.paginator适合你？从 Github 页面：
Backbone.Paginator is a set of opinionated components for paginating collections of data using Backbone.js. It aims to provide both solutions for assisting with pagination of requests to a server (e.g an API) as well as pagination of single-loads of data, where we may wish to further paginate a collection of N results into M pages within a view.
Backbone.Paginator 是一组自以为是的组件，用于使用 Backbone.js 对数据集合进行分页。它旨在提供两种解决方案，用于协助对服务器（例如 API）的请求进行分页，以及对单次加载的数据进行分页，我们可能希望将 N 个结果的集合进一步分页到视图中的 M 个页面中。
