Bootstrapjquery.twbsPagination.js動態(tài)頁碼分頁的示例分析

這篇文章主要為大家展示了“Bootstrap jquery.twbsPagination.js動態(tài)頁碼分頁的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Bootstrap jquery.twbsPagination.js動態(tài)頁碼分頁的示例分析”這篇文章吧。

成都創(chuàng)新互聯(lián)公司是一家以網(wǎng)絡技術公司，為中小企業(yè)提供網(wǎng)站維護、做網(wǎng)站、成都網(wǎng)站建設、網(wǎng)站備案、服務器租用、空間域名、軟件開發(fā)、小程序制作等企業(yè)互聯(lián)網(wǎng)相關業(yè)務，是一家有著豐富的互聯(lián)網(wǎng)運營推廣經(jīng)驗的科技公司，有著多年的網(wǎng)站建站經(jīng)驗，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個面向全國乃至全球的業(yè)務窗口：建站服務熱線：13518219792

Bootstrap風格的分頁控件自適應的：

1.風格樣式：

2.首先引入js文件jQuery.twbsPagination.js

<span ><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span>

3.html頁面

<span ><div class="text-center"> 
 <ul id="pagination-log" class="pagination-sm"></ul> 
</div></span>

4.初始化

<span >// 初始化加載信息數(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)頁碼分頁的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：Bootstrapjquery.twbsPagination.js動態(tài)頁碼分頁的示例分析
URL地址：http://bm7419.com/article14/igeege.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、虛擬主機、手機網(wǎng)站建設、服務器托管、網(wǎng)站設計、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)