Bootstrap jquery.twbsPagination.js動態(tài)頁碼分頁實例代碼

更新時間：2017年02月20日 10:30:23 作者：_PPB

這篇文章主要介紹了Bootstrap jquery.twbsPagination.js動態(tài)頁碼分頁實例代碼,需要的朋友可以參考下

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' 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 = ""; 
    }); 
    //后臺總頁數與可見頁數比較如果小于可見頁數則可見頁數設置為總頁數， 
    if (totalPage < visiblecount) { 
     visiblecount = totalPage; 
    } 
    $('#pagination-log').twbsPagination({ 
     totalPages : totalPage, 
     visiblePages : visiblecount, 
     version : '1.1', 
     //頁面點擊時觸發(fā)事件 
     onPageClick : function(event, page) { 
      // 將當前頁數重置為page 
      pagenow = page 
      //調用后臺獲取數據函數加載點擊的頁碼數據 
      loaddata(); 
     } 
    }); 
   }, 
   error : function(e) { 
    alert("s數據訪問失敗") 
   } 
  }); 
 } 
 //函數初始化是調用內部函數 
 loaddata(); 
};</span>

6.后臺的json數據返回就行

7.結果截圖：

以上所述是小編給大家介紹的Bootstrap jquery.twbsPagination.js動態(tài)頁碼分頁實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

JS應用正則表達式轉換大小寫示例
這篇文章主要介紹了JS應用正則表達式轉換大小寫，以首字母大寫，其它字母小寫為例，喜歡的朋友可以參考下
2014-09-09
js實現鼠標拖動功能
本文主要介紹了js實現鼠標拖動功能的實例代碼。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
純javascript實現四方向文本無縫滾動效果
本文主要給大家分享了使用純javascript實現的可控制的四方向文本無縫滾動的代碼，效果非常不錯，有需要的小伙伴可以參考下。
2015-06-06
百度地圖api應用標注地理位置信息(js版)
弄了一個百度地圖來標注地理位置信息，通過百度api來獲取地址。這地圖api是javascript版,感興趣的朋友可以了解下，或許對你有所幫助
2013-02-02
JavaScrip數組刪除特定元素的幾種方法總結
從js數組中刪除指定元素是我們每個人都遇到的問題，網上這方面的資料也很多，但有的時間過于久遠，有的內容不夠全面，所以自己來整理下，這篇文章主要給大家總結介紹了關于JavaScrip數組刪除特定元素的多種方法，需要的朋友可以參考下。
2017-09-09
javascript操作向表格中動態(tài)加載數據
這篇文章主要為大家詳細介紹了javascript操作向表格中動態(tài)加載數據，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
JavaScript 利用StringBuffer類提升+=拼接字符串效率
JavaScript 利用StringBuffer類提升+=拼接字符串效率，需要的朋友可以參考下。
2009-11-11
Javascript驗證Visa和MasterCard信用卡號的方法
這篇文章主要介紹了Javascript驗證Visa和MasterCard信用卡號的方法,涉及javascript正則驗證的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
javascript常見操作匯總
這篇文章主要介紹了javascript常見操作,有針對字符串、時間、表單等的操作,以及驗證、收藏、隨機數等其他常見技巧,需要的朋友可以參考下
2014-09-09
調試代碼導致IE出錯的避免方法
這篇文章主要介紹了避免調試代碼導致IE出錯的方法,需要的朋友可以參考下
2014-04-04