分頁不適用於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選項之前，分頁工具（上一個，下一個等）沒有激活。

如果您有任何問題，請再次告訴我。