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

问题描述

如何使用KnockoutJS添加分页？

我当前的代码是：

  //假设jsondata是正确传递给此函数的数据集合
 
 myns.DisplayFields = function（jsondata）{
 console.debug（jsondata）; 
 window.viewModel = {
字段：ko.observableArray（jsondata），
 sortByName：function（）{//加上我想要执行的任何自定义函数
 this.items .sort（function（a，b）{
 return a.Name< b.Name？-1：1; 
}）; 
}，
}; 
 
 ko.applyBindings（viewModel）; 
} 
  

我的观点：

< pre class =lang-html prettyprint-override> < table>
< tbody data-bind ='template：fieldTemplate'>< / tbody>
< / table>

< script type =text / htmlid =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在内部如何运行？

解决方案

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

根据你的代码，某事喜欢：

  var myns = {}; 
 myns.DisplayFields = function（jsondata）{
 var viewModel = {
 fields：ko.observableArray（jsondata），
 sortByName：function（）{//以及任何自定义函数我想执行
 this.items.sort（函数（a，b）{
返回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; 
返回this.fields.slice（start，start + size）; 
}，viewModel）; 
 
 ko.applyBindings（viewModel）; 
}; 
  

因此，您可以将表绑定到 pagedRows 。

此处示例： http：// jsfiddle。 net / rniemeyer / 5Xr2X /

How can I add paging with 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?

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
});

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

解决方案

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.

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.

Sample here: http://jsfiddle.net/rniemeyer/5Xr2X/

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