javascript - 分页不适用于 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 页面的源代码时，人们可能会看到 View 模型声明的开头，而无需滚动(当然取决于屏幕分辨率)。无论如何，这都是从第 30 行左右开始的。

请注意， View 模型中有一个名为 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);
};

在没有看到 View 模型其余部分的详细信息的情况下，人们应该能够通过阅读上面的代码知道该函数首先检索要为此示例页面显示的所有数据，然后过滤数据并对数据进行排序.

之后，对数据数组进行切片以提取当前页面要查看的数据，并将该切片传递给 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 我正在度假，但我有一些空闲时间来看看你最新的 fiddle 。

我 fork 了您最新的 fiddle 中的内容，并进行了以下更改以使分页正常工作:

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

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

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

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

页面设置单独处理 JS 更改，但分页工具(上一个、下一个等)直到我在 koGrid 声明中添加 totalServerItems 选项后才处于事件状态。

再次强调，如果您有任何疑问，请告诉我。