Jquery+Ajax+Bootstrap Paginator实现分页的拼接

转载

mob604756f318e7 2018-06-19 17:05:00

文章标签 bootstrap html css 分页 jquery 文章分类 代码人生

效果图如下

Jquery+Ajax+Bootstrap Paginator实现分页的拼接_html 图片.png

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; }