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/p/02d071173d15

總結

以上是生活随笔為你收集整理的bootstrap的分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。