如何使用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); } 

我的看法：

   {{each fields}}   ${ FieldId } ${ Type } ${ Name }: ${ Description }  {{/each}}  

可以或者我会使用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在内部如何运行？

Answer 1

基本思想是你有一个dependentObservable Computed Observables ，它代表当前页面中的行并将你的表绑定到它。 您可以对整个数组进行切片以获取页面的行。 然后，您具有操作页面索引的寻呼机按钮/链接，这会导致依赖于ObOservable，从而导致当前行。

根据您的代码，例如：

 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/

Answer 2

你有没有达到你想要的？

我最近推出了一个使用knockout到github的漂亮寻呼机的例子。

有关源代码，请参阅https://github.com/remcoros/ko.pager ;有关工作示例，请参阅http://remcoros.github.com/ko.pager/example.html 。

所有计算和一些方便的属性都由’Pager’类提供，您可以创建并绑定到该类。 包括示例工作模板。

有关某些文档和用法，请参阅源example.html。

Answer 3

也许https://github.com/addyosmani/backbone.paginator适合你？ 从Github页面：

Backbone.Paginator是一组用于使用Backbone.js对数据集合进行分页的自以为是的组件。 它旨在提供两种解决方案，用于协助对服务器（例如API）的请求分页以及单个数据加载的分页，其中我们可能希望进一步将N个结果的集合分页到视图内的M个页面中。