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 = $('#pageUl');//对应下面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 サイトに注目してください。