アプリでページングを表示するためにTwbsPaginationプラグインを使用しています。初期化中にページサイズを設定すると正常に動作します。しかし、検索結果に基づいて、合計ページ数をリセットしたいと思います。
使ってみると
$('#pagination').twbsPagination({totalPages:10});
表示されている総ページ数はリセットされません。
ああ、私はなんとかこの仕事を別の方法で手に入れることができました。これを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');
}
});
}
スクリプトコードを分析した後、このスクリプトが。data()メソッドを使用してページネーションのビューステートを保存していることを知り、明示的にそれを行うことができました。
。data():一致した要素に関連付けられた任意のデータを格納するか、一致した要素のセットの最初の要素の名前付きデータストアで値を返します。参照: http://api.jquery.com/data/
ページネーションをリセットするソリューション。
「リストレンダリング」の前に呼び出す必要がありますOR「データバインディング」関数/メソッド
$( '#pagination')。empty();
$( '#pagination')。removeData( "twbs-pagination");
$( '#pagination')。unbind( "page");
これにより、ページネーションのビューステートデータがリセットされます。 ( "twbs-pagination"はビューステートキー)。
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を手動で実行します
destroyメソッドが機能しませんでした(1.4.1)。ソースコードを調べると、正しく再インスタンス化するための2つの重要なポイントがあることがわかりました。
上記は私のコードの一部を示しています、それがあなたを助けることを願っています:
$('.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);
}
}
);
}