Question

我正在使用KO-grid，它似乎可以加载所有数据。现在，我正在研究分页部分，它似乎无法正常工作。是的，我在底部进行分页控制，但是当它能够决定页面大小时，它似乎不起作用。根据{{1}}

上给出的配置详细信息，页面大小由两个选项驱动

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>

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

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

<强>更新

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

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

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

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

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

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

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

再次，如果您有任何问题，请与我联系。

分页不适用于KO Grid

1 个答案: