javascript - knockout : Table Paging

标签 javascript html knockout.js html-table knockout-3.0

我尝试在我的模型下进行分页。我可以根据我拥有的记录数量正确地让 Arrow 移动。但数据不会根据要在页面上显示的最大行数而反射(reflect)/减少/增加。

请在下面找到Fiddle

我使用的引用示例是 Here

/*************
  Start of logic for Paging

  ******/


  self.items = ko.observableArray();
   this.all =  self.items;

 self.pageNumber = ko.observable(0);
    self.nbPerPage = 2;

    // I think this is somewhere I am missing the functionality.

    this.totalPages = ko.computed(function() {
        var div = Math.floor(self.all().length / self.nbPerPage);
        div += self.all().length % self.nbPerPage > 0 ? 1 : 0;
        return div - 1;
    });

this.paginated = ko.computed(function() {
        var first = self.pageNumber() * self.nbPerPage;
        return self.all.slice(first, first + self.nbPerPage);
    });

    this.hasPrevious = ko.computed(function() {
        return self.pageNumber() !== 0;
    });

    this.hasNext = ko.computed(function() {
        return self.pageNumber() !== self.totalPages();
    });

  this.next = function() {
        if(self.pageNumber() < self.totalPages()) {
            self.pageNumber(self.pageNumber() + 1);
        }
    }

  this.previous = function() {
        if(self.pageNumber() != 0) {
            self.pageNumber(self.pageNumber() - 1);
        }
    }  


/***********
End of Logic for Paging

*/

最佳答案

您只需要从...更新您的 View

<tbody data-bind="foreach: items " >

<tbody data-bind="foreach: paginated " >

关于javascript - knockout : Table Paging,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51638095/

相关文章:

javascript - 图表不会在 `onchange` 函数中重绘

javascript - 如有必要,调整图像大小以适应固定高度的容器

javascript - 如何拥有动态内容的静态标题?

html - 为什么我不能输入或点击文本区域?

javascript - Knockout.js - 对象数据存储最佳实践

javascript - 如何让点击操作等待输入框填满值?

javascript - 无法让 jQuery addClass ("active") 工作

javascript - 如何使用 CSS 使边框底线更长

javascript - KoJs : bind a dynamic number of text boxes to elements of an array

jquery-ui - knockoutjs 提交绑定(bind)未正确处理输入键