web-dev-qa-db-ja.com

jqueryページネーションプラグインの合計ページ数をリセットする

アプリでページングを表示するためにTwbsPaginationプラグインを使用しています。初期化中にページサイズを設定すると正常に動作します。しかし、検索結果に基づいて、合計ページ数をリセットしたいと思います。

使ってみると

$('#pagination').twbsPagination({totalPages:10});

表示されている総ページ数はリセットされません。

jqueryresetjquery-pagination
14
Krishna Sarma

ああ、私はなんとかこの仕事を別の方法で手に入れることができました。これをJQGridと組み合わせて使用​​しているので、コードにパッチを適用するためにloadCompleteイベントを選択しました。手順は次のとおりです。

1.（twbsコントロールの）ページングボタンを保持するDIVを作成します

<div id="paginationholder"></div>

2.現在のページを保持するためのローカルjs変数を作成しました

var currentPage=1;

3.JQgridのAJAX）の前にページ番号を更新します

beforeRequest: function () {
    var postData = grid.jqGrid('getGridParam', "postData");
    postData.page = currentPage;
    postData.rows = $("#rows").val();
}

4.loadCompleteでページネーションコントロールを再構築します。ユーザーがページをクリックすると、ページ番号（currentPage）が更新され、グリッドが再読み込みされます。

loadComplete: function (data) {
    $('#paginationholder').html('');
    $('#paginationholder').html('<ul id="pagination" class="pagination-sm"></ul>');
    $('#pagination').twbsPagination({
        startPage: data.page,
        totalPages: data.total,
        visiblePages: 5,
        onPageClick: function (event, page) {
            currentPage = page;
            grid.trigger('reloadGrid');
        }
    });
}
3
Krishna Sarma

スクリプトコードを分析した後、このスクリプトが。data（）メソッドを使用してページネーションのビューステートを保存していることを知り、明示的にそれを行うことができました。

。data（）：一致した要素に関連付けられた任意のデータを格納するか、一致した要素のセットの最初の要素の名前付きデータストアで値を返します。参照： http://api.jquery.com/data/

ページネーションをリセットするソリューション。

「リストレンダリング」の前に呼び出す必要がありますOR「データバインディング」関数/メソッド

$（ '＃pagination'）。empty（）;

$（ '＃pagination'）。removeData（ "twbs-pagination"）;

$（ '＃pagination'）。unbind（ "page"）;

これにより、ページネーションのビューステートデータがリセットされます。 （ "twbs-pagination"はビューステートキー）。

15
Vipin Kohli

destroyを利用できます。 ここ を参照してください。

そう：

$('#pagination').twbsPagination('destroy');

次に、それを再初期化します。

$('#pagination').twbsPagination({totalPages:5});

フィドル

5
Robin Carlo Catacutan

twbs-ページネーションのソースコードを読む

ここ 合計ページのリセットに失敗した理由を示します：

    var data = $this.data('twbs-pagination');

    if (!data) $this.data('twbs-pagination', (data = new TwbsPagination(this, options) ));

ビューステートパラメータtwbs-ページネーションが存在するため、再レンダリングできません。

ここ はビューステートを削除するための解決策です：

TwbsPagination.prototype = {

    destroy: function () {
        this.$element.empty();//remove child nodes
        this.$element.removeData('twbs-pagination');//remove viewstate
        this.$element.off('page');//unbind $(this) node from page
        return this;
    },

したがって、destroyメソッド@RobinCarloCatacutanを呼び出すことができます

[〜＃〜]または[〜＃〜]内部メソッド@VipinKohliを手動で実行します

0
maosong

destroyメソッドが機能しませんでした（1.4.1）。ソースコードを調べると、正しく再インスタンス化するための2つの重要なポイントがあることがわかりました。

  1. pagination.data（ 'twbs-pagination.js'、null）;
  2. インスタンス化パラメータstartPageは、文字列型ではなくint型である必要があります

上記は私のコードの一部を示しています、それがあなたを助けることを願っています：

$('.unstyled > li >a').on('click', function (e) {
            e.preventDefault();
            pagination.data('twbs-pagination.js',null);
            loadPage(1,$(e.target).attr('categoryId'));
        });

function initilizePagination(totalPages,currentPage,blogCategory){
                pagination.twbsPagination({
                    initiateStartPageClick: false, 
                    totalPages: totalPages,
                    startPage: currentPage,
                    onPageClick: function (event, page) {
                        loadPage(page, blogCategory);
                    }
                });
                pagination.twbsPagination({render:currentPage});
            }

function loadPage(page,blogCategory) {
                    $.ajax("url",
                        {
                            method: "get",
                            success: function (data) {
                                $("#blogListWrapper").html(data);
                                var ajaxPageCount = $('#ajaxPageCount').val();
                                var ajaxPageNo = parseInt($('#ajaxPageNo').val());
                             initilizePagination(ajaxPageCount,ajaxPageNo,blogCategory);
                            }
                        }
                    );
                }
0
SalutonMondo