Bootstrap jquery.twbsPagination.js動態(tài)頁碼分頁實例代碼
更新時間:2017年02月20日 10:30:23 作者:_PPB
這篇文章主要介紹了Bootstrap jquery.twbsPagination.js動態(tài)頁碼分頁實例代碼,需要的朋友可以參考下
Bootstrap風格的分頁控件自適應的:
參考網(wǎng)址:分頁參考文檔
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;">// 初始化加載信息數(shù)據(jù) function initUserlogData() { //重置分頁組件否則保留上次查詢的,一般來說很多問題出現(xiàn)與這三行代碼有關如:雖然數(shù)據(jù)正確但是頁碼不對仍然為上一次查詢出的一致 $('#pagination-log').empty(); $('#pagination-log').removeData("twbs-pagination"); $('#pagination-log').unbind("page"); //將頁面的數(shù)據(jù)容器制空 $("#messagebody").empty(); //設置默認當前頁 var pagenow = 1; //設置默認總頁數(shù) var totalPage = 1; //設置默認可見頁數(shù) var visiblecount = 5; //加載后臺數(shù)據(jù)頁面 function loaddata() { $.ajax({ url : "/tqyh/showUserloginfo", type : "post", data : { "currentpage" : pagenow }, dataType : "json", success : function(data) { var htmlobj = ""; totalPage = data.page.totalPage;//將后臺數(shù)據(jù)復制給總頁數(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' onclick='showmodal(this)' >" + "<i class='glyphicon glyphicon-map-marker'> LOCATION</i></button></td>"; }else{ htmlobj = htmlobj +"<td>"+ userlog.details + "</td>"; }; htmlobj = htmlobj + "</tr>"; $("#userlogbody").append(htmlobj); htmlobj = ""; }); //后臺總頁數(shù)與可見頁數(shù)比較如果小于可見頁數(shù)則可見頁數(shù)設置為總頁數(shù), if (totalPage < visiblecount) { visiblecount = totalPage; } $('#pagination-log').twbsPagination({ totalPages : totalPage, visiblePages : visiblecount, version : '1.1', //頁面點擊時觸發(fā)事件 onPageClick : function(event, page) { // 將當前頁數(shù)重置為page pagenow = page //調(diào)用后臺獲取數(shù)據(jù)函數(shù)加載點擊的頁碼數(shù)據(jù) loaddata(); } }); }, error : function(e) { alert("s數(shù)據(jù)訪問失敗") } }); } //函數(shù)初始化是調(diào)用內(nèi)部函數(shù) loaddata(); };</span>
6.后臺的json數(shù)據(jù)返回就行
7.結果截圖:
以上所述是小編給大家介紹的Bootstrap jquery.twbsPagination.js動態(tài)頁碼分頁實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
javascript實現(xiàn)tabs選項卡切換效果(自寫原生js)
常用的頁面效果有彈出層效果,無縫滾動效果,選項卡切換效果,接下來與大家分享一款自己用原生javascript寫的選項卡切換效果,感興趣的朋友可以參考下哈2013-03-03小程序顯示彈窗時禁止下層的內(nèi)容滾動實現(xiàn)方法
這篇文章主要介紹了小程序顯示彈窗時禁止下層的內(nèi)容滾動實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03用Javascript實現(xiàn)Windows任務管理器的代碼
在Windows系統(tǒng)上,自從98系統(tǒng)以來就提供了腳本宿主(Windows Scripting Host 簡稱WSH)的功能,WSH可以加載并運行JS和VBS腳本,并支持調(diào)用系統(tǒng)的COM組件,在COM組件的支持下腳本可以輕松實現(xiàn)非常強大的功能2012-03-03