Jquery+Ajax+Bootstrap Paginator實現分頁的拼接

效果圖如下

jsp頁面引入bootstrap樣式，jquery和bootstrap-paginator.js

     <link type="text/css" rel="stylesheet" href="bootstrap.css">  
    <script type="text/javascript" src="jquery.min.js"></script>  
    <script src="pagination/js/bootstrap-paginator.js"></script>  

jsp頁面代碼，頁面兩個div，一個用於拼接html，一個放分頁按鈕代碼

<div class="row"> <div class="col-md-12"> <div class="portlet"> <div id="htmlDiv"></div> <div class="col-lg-12" align="center"> <!-- 分頁控件，標簽必須是<ul> --> <ul id="pageButton"></ul> </div> </div> </div> </div> 

js代碼：

// 初始化頁面 getPageOfMemo(1); // 分頁函數 function getPageOfMemo(page) { // 獲取請求參數(input里面的時間人員參數可忽略注釋) var beginTime = $("#signDate").val(); var endTime = $("#signDate1").val(); var organId = $("#organId").val(); var personName = $("#personName").val(); $.ajax({ url : basePath+"stats/mattess/getDataPage", type : "POST", data : { "page" : page, // 初始頁 "personName" : personName,//以下是搜索相關的參數 input里面的時間人員參數可忽略注釋，同上 "sleepStartTime" : beginTime, "sleepStopTime" : endTime, "organId" : organId, }, dataType : "json", success : function(data) { var totalPages; if (data.returnData != null) { totalPages = data.returnData.totalPages; var htm = ""; $.each(data.returnData.sList, function(i, item) { htm += "<div class='row' id='row-con' ><div><div class='sleep1'>"; htm += "<div>" + item.uuid + "</div><div><img id='headUrl' src='" + item.headUrl + "'/></div><div>" + item.personName + "</div>"; htm += "</div><div class='sleep2'>"; if (item.personSex == 1000001) { htm += "<div>性別：男</div>"; } else { htm += "<div>性別：女</div>"; } htm += "<div>年齡：" + item.personAge + "</div><div>部門：" + item.organName + "</div>"; htm += "</div><div class='sleep3'>" htm += "<div>入睡時間：" + item.sleepStartTime + "</div><div>睡醒時間：" + item.sleepStopTime + "</div>"; htm += "</div><div class='sleep4'>"; htm += "<div>平均心率：" + item.heart + "次/分</div><div>平均呼吸：" + item.breath + "次/分</div><div>翻身次數：" + item.bodyMove + "次/分</div>"; htm += "</div><div class='sleep6'>"; htm += "<div ><p>" + item.sleepQuality + "分</p>"; if (item.sleepQuality >= 60) { htm += "<p style='border: 4px solid green;'>及格</p>"; } else { htm += "<p >不及格</p>"; } htm += "</div></div><div class='sleep7' onclick='getDetail("+item.id+")'>詳情</div>"; htm += "</div></div>"; }); $('#htmlDiv').html(htm); var element = $('#pageButton'); var options = { bootstrapMajorVersion : 3, currentPage : page, // 當前頁數 numberOfPages : 5, // 顯示按鈕的數量 totalPages : totalPages, // 總頁數 itemTexts : function(type, page, current) { switch (type) { case "first": return "首頁"; case "prev": return "上一頁"; case "next": return "下一頁"; case "last": return "末頁"; case "page": return page; } }, // 點擊事件，用於通過Ajax來刷新整個list列表 onPageClicked : function(event, originalEvent, type, page) { getPageOfMemo(page); } }; element.bootstrapPaginator(options); } } }); }; 

測試通道，如果想要測試完整效果，css源碼附上，效果圖如同開篇的文章圖片

#htmlDiv { color: #5b5d5e; } #row-con { border: 1px solid #ced2d4; margin-bottom: 25px; width: 90%; margin-left: 10px; border-radius: 23px !important; } .sleep1 { width: 15%; float: left; text-align: center; } .sleep2 { width: 15%; float: left; text-align: center; } .sleep3 { width: 22%; float: left; text-align: center; } .sleep4 { width: 23%; float: left; text-align: center; } .sleep5 { width: 15%; float: left; text-align: center; } .sleep6 { width: 9%; float: left; text-align: center; margin-top: 10px; } .sleep6 div { border: 4px solid orangered; border-radius: 50px !important; width: 72px; height: 72px; } .sleep7 { width: 10%; float: left; text-align: center; color: blue; margin-top: 27px; } .text-description { text-align: center; height: 35px; } .text-capitalize { text-align: center; height: 35px; } .text-muted { text-align: center; height: 35px; font-size: 18px; color: #000000; margin-top: 10px; } #headUrl { width: 30px; height: 35px; } 

原文作者：祈澈姑娘技術博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。

堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。

關注「編程微刊」公眾號 ，在微信后台回復「領取資源」，獲取IT資源300G干貨大全。公眾號回復“1”，拉你進程序員技術討論群