效果图如下
图片. 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;
- }
来源: http://www.jianshu.com/p/02d071173d15