分页不适用于 KO 网格

Question

我正在使用KO-grid，它似乎可以很好地加载所有数据。现在，我正在处理分页部分，它似乎无法正常工作。是的，我在底部进行分页控制，但是当能够确定页面大小时，它似乎不起作用。页面大小由两个选项驱动，具体取决于https://github.com/ericmbarnard/KoGrid/wiki/Configuration上给出的配置详细信息

1.pageSize：[5,10， 25] -- 似乎显示选项，但是当我将我的选择从 5 更改为 10 时，它似乎无法处理这些选项。 2.页面大小 ：//somenumber -- 破坏代码。

我在jsfiddle上有它的工作模型：http://jsfiddle.net/sf4p3/46/

有什么建议吗？

Answer 1

好吧，看来 KoGrid 中的分页并没有发挥你所希望的魔力。

以下是 GitHub 上 KoGrid wiki 示例的链接：

http://ericmbarnard.github.com/KoGrid/examples/Complex-Server-Side-Paging.html

在查看 HTML 页面的源代码时，人们可能会看到视图模型声明的开头，而无需滚动(当然，取决于屏幕分辨率)。 无论如何，这从第 30 行开始。

请注意，视图模型中有一个名为pageSize的可观察量，它设置为 50。

向下滚动一点，应该会看到名为filter、sort和getPagedDataAsync的函数，用于过滤数据、对数据进行排序以及为当前页面创建数据集。

下面是getPagedDataAsync函数的代码：

this.getPagedDataAsync = function (pageSize, page, filterInfo, sortInfo) {
setTimeout(function () {
var data = window.getExampleData();
var filteredData = filter(data(), filterInfo);
var sortedData = sort(filteredData, sortInfo);
var pagedData = sortedData.slice((page - 1) * pageSize, page * pageSize);
self.myObsArray(pagedData);
}, 0);
};

在没有看到视图模型其余部分的详细信息的情况下，应该能够通过阅读上面的代码判断出此函数首先检索要为此示例页面显示的所有数据，然后筛选数据并对数据进行排序。

之后，对数据数组进行切片以提取当前页面要查看的数据，并将该切片传递给用于在网格中显示数据的myObsArray可观察数组。

下面是此示例中网格的声明：

<div id="sandBox" class="example" style="height: 600px; max-width: 700px;" 
data-bind="koGrid: { 
data: myObsArray,
columnDefs: [ 
{ field: 'Sku', width: 140 },
{ field: 'Vendor', width: 100 },
{ field: 'SeasonCode', displayName: 'Season Code', width: 150 },
{ field: 'Mfg_Id', displayName: 'Mfg ID', width: 180 },
{ field: 'UPC', width: 170 }
],
autogenerateColumns: false,
isMultiSelect: false,
enablePaging: true,
useExternalFiltering: true,
useExternalSorting: true,
filterInfo: filterInfo,
sortInfo: sortInfo,
pageSize: pageSize,
pageSizes: [25, 50, 75],
currentPage: currentPage,
totalServerItems: totalServerItems,
selectedItem: selectedItem }">
</div>

希望这会有所帮助，您将能够解决分页问题。

无论如何，如果您有任何问题，请告诉我。

更新

@Californicated我在度假，但我有一些停机时间可以偷看你最新的小提琴。

我分叉了您在最新小提琴中的内容，并进行了以下更改以使分页正常工作：

在可观察量声明中，我将pageSize的值更改为 2，将totalServerItems的值更改为 7。 在 JS 中，我更改了datavar 中的声明getPagedDataAsync函数，因此它正在检索Prizefillfilmentstatuses可观察数组。

在 JS 代码的最后一行，我将第一个参数从 50 更改为 2。 在 jsFiddle 工具栏中，我将第一个下拉列表从"onLoad"更改为"无换行(正文)">

在 HTML 中的 koGrid 声明中，我添加了以下选项/参数：

pageSize: pageSize,
currentPage: currentPage,
totalServerItems: totalServerItems,
selectedItem: selectedItem

页面设置单独处理 JS 更改，但分页工具(上一个、下一个等)在我在 koGrid 声明中添加totalServerItems选项之前未处于活动状态。

同样，如果您有任何问题，请告诉我。