如何使用 KnockoutJS 将客户端分页添加到表? [英] How to use KnockoutJS for adding client side paging to table?

问题描述

如何使用 KnockoutJS 添加分页?

How can I add paging with 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 或其他库?

Could or would I use jQuery, jQuery UI or another library?

我在 KnockoutJS 网站上看到了一个例子:

I have seen on the KnockoutJS site as an example:

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 是如何在内部运行的?

However where would I add pageSize to my code? How is this pageSize internally being run?

推荐答案

基本思想是你有一个 dependentObservable 计算的 Observables 表示当前的行页并将您的表格绑定到它.您将切片整个数组以获取页面的行.然后，您有操作页面索引的寻呼机按钮/链接，这会导致重新评估依赖的Observable，从而产生当前行.

The basic idea is that you have a dependentObservable Computed Observables that 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.

基于您的代码，例如:

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.

So, you would bind your table to pagedRows.

此处示例:http://jsfiddle.net/rniemeyer/5Xr2X/

这篇关于如何使用 KnockoutJS 将客户端分页添加到表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！