ホームページ > ウェブフロントエンド > jsチュートリアル > Bootstrap Paginator ページング プラグインと Ajax を組み合わせて、動的非リフレッシュ ページング効果を実現します

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

高洛峰
リリース: 2017-01-10 14:24:27
オリジナル
2389 人が閲覧しました

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相结合实现动态无刷新分页效果

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート