Bootstrap Paginator ページング プラグインと Ajax を組み合わせて、動的非リフレッシュ ページング効果を実現します

Bootstrap Paginator ページング プラグインのダウンロード アドレス:

DownloadVisit GitHub

1. これは、ページ分割が必要なページの JS 関数です:

<span style="font-size:14px;">function paging(page){
$.ajax({
type: "GET",
url: "${ctx}/api/v1/user/1/"+(page-1)+"/5",
dataType:"json",
success: function(msg){
....//省略（查询出来数据）
}
});
$.ajax({
type: "GET",
url:"${ctx}/api/v1/user/count/1",
dataType:"json",
success:function(msg){
var pages = Math.ceil(msg.data/5);//这里data里面有数据总量
var element = $(&#39;#pageUl&#39;);//对应下面ul的ID
var options = {
bootstrapMajorVersion:3,
currentPage: page,//当前页面
numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li）
totalPages:pages //总页数
}
element.bootstrapPaginator(options);
}
});
}</span>

ページ:

<span style="font-size:14px;"><ul class="pagination" id="pageUl">
</ul></span>

*li

2 内で自動的に生成されます。最も重要かつ中心的なことは、次のように bootstrap-paginator.js ソース ファイルを自分で変更することです:

<span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) {
//show the corresponding page and retrieve the newly built item related to the page clicked before for the event return
var currentTarget = $(event.currentTarget);
switch (type) {
case "first":
currentTarget.bootstrapPaginator("showFirst");
paging(page);
break;
//上一页
case "prev":
currentTarget.bootstrapPaginator("showPrevious");
paging(page);
break;
case "next":
currentTarget.bootstrapPaginator("showNext");
paging(page);
break;
case "last":
currentTarget.bootstrapPaginator("showLast");
paging(page);
break;
case "page":
currentTarget.bootstrapPaginator("show", page);
paging(page);
break;
}
},</span>

* ページ スタイルの後にページング (ページ) メソッドを呼び出します。クリックすると出てきます。ここにページのソース ファイル内のパラメータがすでに存在するので、それらを渡すだけです。

効果: スタイルが変更されると、コントロールのページ値を直接使用して、Ajax リクエストを送信します。最後に、リフレッシュ ページングは​​行われません。

上記は、動的非リフレッシュページング効果を実現するためのBootstrap Paginatorページングプラグインとajaxの組み合わせについて編集者が紹介した関連知識です。ご質問がございましたら、メッセージを残してください。編集者が時間内に全員に返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

Bootstrap Paginator ページング プラグインと ajax を組み合わせて動的非リフレッシュ ページング効果を実現する関連記事の詳細については、PHP 中国語 Web サイトに注目してください。