分页不适用于KO Grid

Question

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

1.pageSizes：[5,10,25] - 似乎显示了选项，但是当我将我的选择从5更改为10时，它似乎无法选择。 2.pagesize：// 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>

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

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

UPDATE

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

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

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

在JS代码的最后一行，我将第一个参数从50更改为2.在jsFiddle工具栏中，我将第一个下拉列表从“onLoad”更改为“no wrap（body）”

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

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

页面设置单独使用JS更改，但是在我在koGrid声明中添加了totalServerItems选项之前，分页工具（上一个，下一个等）没有激活。

如果您有任何问题，请再次告诉我。