Bootstrap jquery.twbsPagination.js動(dòng)態(tài)頁(yè)碼分頁(yè)案例代碼
發(fā)表時(shí)間：2023-04-03 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]Bootstrap風(fēng)格的分頁(yè)控件自適應(yīng)的：參考網(wǎng)址：分頁(yè)參考文檔1.風(fēng)格樣式：2.首先引入js文件jQuery.twbsPagination.js<span style="font-...
Bootstrap風(fēng)格的分頁(yè)控件自適應(yīng)的：
參考網(wǎng)址：分頁(yè)參考文檔
1.風(fēng)格樣式：
2.首先引入js文件jQuery.twbsPagination.js
<span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span>
3.html頁(yè)面
<span style="font-size:14px;"><div class="text-center"> <ul id="pagination-log" class="pagination-sm"></ul> </div></span>
4.初始化
<span style="font-size:14px;">// 初始化加載信息數(shù)據(jù) function initUserlogData() { //重置分頁(yè)組件否則保留上次查詢的， 一般來(lái)說(shuō)很多問(wèn)題出現(xiàn)與這三行代碼有關(guān)如：雖然數(shù)據(jù)正確但是頁(yè)碼不對(duì)仍然為上一次查詢出的一致 $('#pagination-log').empty(); $('#pagination-log').removeData("twbs-pagination"); $('#pagination-log').unbind("page"); //將頁(yè)面的數(shù)據(jù)容器制空 $("#messagebody").empty(); //設(shè)置默認(rèn)當(dāng)前頁(yè) var pagenow = 1; //設(shè)置默認(rèn)總頁(yè)數(shù) var totalPage = 1; //設(shè)置默認(rèn)可見頁(yè)數(shù) var visiblecount = 5; //加載后臺(tái)數(shù)據(jù)頁(yè)面 function loaddata() { $.ajax({ url : "/tqyh/showUserloginfo", type : "post", data : { "currentpage" : pagenow }, dataType : "json", success : function(data) { var htmlobj = ""; totalPage = data.page.totalPage;//將后臺(tái)數(shù)據(jù)復(fù)制給總頁(yè)數(shù) totalcount = data.page.totalCount; $("#userlogbody").empty(); $.each(data.userlog, function(index, userlog) { htmlobj = htmlobj + "<tr>" + "<td><input type='checkbox'/></td>" + "<td>" + userlog.toUserName + "</td>" + "<td>" + userlog.fromUserName + "</td>" + "<td>" + userlog.createTime + "</td>" + "<td>" + userlog.eventType + "</td>" ; if(userlog.eventType=="LOCATION"){ htmlobj = htmlobj + "<td><button name="+ userlog.eventType + " location='"+userlog.details+"' class='btn btn-danger btn-lg btn-sm no-radius' data-toggle='modal' data-target='#myModal' , //頁(yè)面點(diǎn)擊時(shí)觸發(fā)事件 onPageClick : function(event, page) { // 將當(dāng)前頁(yè)數(shù)重置為page pagenow = page //調(diào)用后臺(tái)獲取數(shù)據(jù)函數(shù)加載點(diǎn)擊的頁(yè)碼數(shù)據(jù) loaddata(); } }); }, error : function(e) { alert("s數(shù)據(jù)訪問(wèn)失敗") } }); } //函數(shù)初始化是調(diào)用內(nèi)部函數(shù) loaddata(); };</span> 6.后臺(tái)的json數(shù)據(jù)返回就行
7.結(jié)果截圖：
以上所述是小編給大家介紹的Bootstrap jquery.twbsPagination.js動(dòng)態(tài)頁(yè)碼分頁(yè)實(shí)例代碼， 希望對(duì)大家有所幫助， 如果大家有任何疑問(wèn)請(qǐng)給我留言， 小編會(huì)及時(shí)回復(fù)大家的。
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
