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”,拉你进程序员技术讨论群.
Jquery+Ajax+Bootstrap Paginator实现分页的拼接的更多相关文章
- 基于Jquery+Ajax+Json+存储过程 高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
- jQuery+Ajax+PHP实现异步分页数据显示
这几天做毕业设计的时候需要使用到一个异步分页的功能,即翻页的时候只是刷新分页的数据而不是刷新整个页面.因为之前做项目的时候没有做过这方面的功能,所以还是纠结了挺长时间的,在网上也找了很多资料,结合自己 ...
- jQuery+AJAX实现纯js分页功能
使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...
- jquery ajax json简单的分页,模拟数据,没有封装,只显示原理
简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...
- jQuery+Ajax+PHP+Mysql实现分页显示数据
css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } ...
- bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)
html部分: <ul class="pagination"></ul> <!--bootstrap3版本用ul包裹--> <div cl ...
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- Bootstrap Paginator分页插件
Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...
随机推荐
- linux下支持托盘的邮件客户端Sylpheed
在网上搜索了很多客户端想支持系统托盘,发现一个很不错的邮件客户端Sylpheed.设置方式和foxmail很像,最为重要的是支持系统托盘,很方便,默认没有开启,简单设置下:配置->通用首选项-& ...
- 概率编程:《贝叶斯方法概率编程与贝叶斯推断》中文PDF+英文PDF+代码
贝叶斯推理的方法非常自然和极其强大.然而,大多数图书讨论贝叶斯推理,依赖于非常复杂的数学分析和人工的例子,使没有强大数学背景的人无法接触.<贝叶斯方法概率编程与贝叶斯推断>从编程.计算的角 ...
- 参考《深度学习原理与应用实践》中文PDF
读国内关于深度学习的书籍,可以看看<深度学习原理与应用实践>,对深度学习原理的介绍比较简略(第3.4章共18页).只介绍了"神经网络"和"卷积神经网络&quo ...
- SSH—指定登录的IP
设置ssh安全--指定的IP登陆 为了服务器更加具有安全性,我们可以设置ssh安全只允许用户从固定的IP进行登陆, 首先获取要登录服务器的电脑的IP地址 登录http://www.ip138.com/ ...
- 【ios开发学习 - 第二课】iOS项目文件夹结构
文件夹结构 AppDelegate Models Macro General Helpers Vendors Sections Resources 一个合理的文件夹结构首先应该是清晰的.让人一眼看 ...
- Appium Android Bootstrap源代码分析之启动执行
通过前面的两篇文章<Appium Android Bootstrap源代码分析之控件AndroidElement>和<Appium Android Bootstrap源代码分析之命令 ...
- AngularJS实现cookie跨域
前后端分离被越来越多的公司重视利用.然后带来的最棘手的问题就是.用户信息应怎样保存. 一.场景描写叙述 以Java为后台,AngluarJS做前端为例进行描写叙述:当用户在界面登录时.需把用户信息(如 ...
- jquery--延迟对象
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- C#接口,类,集成
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- android图像处理系列之六-- 给图片添加边框(下)-图片叠加
前面介绍了一种用透明图片叠加的方式添加花边边框,下面将介绍另外一种图片叠加添加花边边框的方式.前面方法有一个缺点,就是做成PNG图片,图片体积会很大,不是一般的大,比同样的JPG大三倍多,如果项目可以 ...