Bootstrap jquery.twbsPagination.js動態頁碼分頁案例代碼
發表時間:2023-04-03 來源:明輝站整理相關軟件相關文章人氣:
[摘要]Bootstrap風格的分頁控件自適應的:參考網址:分頁參考文檔1.風格樣式:2.首先引入js文件jQuery.twbsPagination.js<span style="font-...
Bootstrap風格的分頁控件自適應的:
參考網址:分頁參考文檔
1.風格樣式:

2.首先引入js文件jQuery.twbsPagination.js
<span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span>
3.html頁面
<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;">// 初始化加載信息數據 function initUserlogData() { //重置分頁組件否則保留上次查詢的, 一般來說很多問題出現與這三行代碼有關如:雖然數據正確但是頁碼不對仍然為上一次查詢出的一致 $('#pagination-log').empty(); $('#pagination-log').removeData("twbs-pagination"); $('#pagination-log').unbind("page"); //將頁面的數據容器制空 $("#messagebody").empty(); //設置默認當前頁 var pagenow = 1; //設置默認總頁數 var totalPage = 1; //設置默認可見頁數 var visiblecount = 5; //加載后臺數據頁面 function loaddata() { $.ajax({ url : "/tqyh/showUserloginfo", type : "post", data : { "currentpage" : pagenow }, dataType : "json", success : function(data) { var htmlobj = ""; totalPage = data.page.totalPage;//將后臺數據復制給總頁數 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' , //頁面點擊時觸發事件 onPageClick : function(event, page) { // 將當前頁數重置為page pagenow = page //調用后臺獲取數據函數加載點擊的頁碼數據 loaddata(); } }); }, error : function(e) { alert("s數據訪問失敗") } }); } //函數初始化是調用內部函數 loaddata(); };</span>
6.后臺的json數據返回就行
7.結果截圖:

以上所述是小編給大家介紹的Bootstrap jquery.twbsPagination.js動態頁碼分頁實例代碼, 希望對大家有所幫助, 如果大家有任何疑問請給我留言, 小編會及時回復大家的。
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。