7

Knockout ベースの共有データ グリッドで動作するいくつかのページネーション UI 用の機能する Knockout テンプレートがあります。このテンプレートは、グリッド内のデータの「ページ」ごとに HREF をレンダリングします。

テンプレートは機能しますが、大量のデータをフェッチすると、グリッドの下に何十ものナビゲーション ページ リンクが表示されてしまうため、扱いにくいです。現在のテンプレートは次のとおりです。

<div class="idTemplate_ko_simpleGrid_pageLinks">
    <p>
        <span>Go to page:</span>
        <!-- ko foreach: ko.utils.range(0, maxPageIndex) -->
            <a href="javascript:void(0);"
               class="grid-pagination" 
               data-bind="text: $data + 1, click: function() { $root.currentPageIndex($data) }, css: { selected: $data == $root.currentPageIndex() }"></a>
        <!-- /ko -->
    </p>
</div>

'currentPageIndex' 値は、モデル内の単純な ko オブザーバブルです。

this.currentPageIndex = ko.observable(0);

そして、「maxPageIndex」は、モデルで計算されたオブザーバブルです。

this.maxPageIndex = ko.computed(function () {
    return Math.ceil(ko.utils.unwrapObservable(this.filteredItems()).length / this.pageSize()) - 1;
}, this);

テンプレートとモデルを変更して、StackOverflow と同様のページング UI を有効にするにはどうすればよいですか?

例えば：

前へ 1 ... 3 4 5 6 7 ... 69 次へ

4

3 に答える 3

19

これはまさに、私がしばらくの間使用してきたページャー スタイルです。

いくつかのプロジェクトで使用したページャー機能を、例によってノックアウトとテンプレートの拡張機能に抽出し終えました。

ソースについてはhttps://github.com/remcoros/ko.pagerを、実際の例についてはhttp://remcoros.github.com/ko.pager/example.htmlを参照してください。

すべての計算といくつかの便利なプロパティは、作成してバインドできる「Pager」クラスによって提供されます。ただし、サンプルの作業用テンプレートが含まれています。

使用方法については、ソースの example.html を参照してください。

于 2012-11-02T20:59:07.187 に答える
1

私が最初に行うことは、これを行うカスタム バインディングまたはライブラリがあるかどうかを確認することです。存在する場合は、そのライブラリを使用するカスタム バインドを作成します。

バックアップ計画 - 独自のカスタム バインドを作成します。私は次のようなものを作ります：

<div data-bind="pagination: { maxIndex: maxPageIndex(), numToShow: 7 }">
...
</div>

次に、カスタム バインディングで次のようにします。

ko.bindingHandlers.pagination = {
    update: function(element, valueAccessor) {
        if (valueAccessor().maxPageIndex > valueAccessor().numToShow) {
            // use jquery to loop and append new $("<a>") tags to $(element), using "1", then ... and a segment in the middle, followed by ... and the last index.
        }
        else {
            // loop over the regular amount.
        }
    }
};
于 2012-08-21T06:26:56.397 に答える
1

私はとてもいいので、正確に2分で作成しました:P (おそらくバグがあります) jQueryのページネーションである最初に見つけたページャーに基づいています

http://jsfiddle.net/tymTz/2/

于 2012-08-21T08:20:20.853 に答える