bootstrap的分页

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的分页相关推荐

Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...
bootstrap php ajax,ThinkPHP 整合Bootstrap Ajax分页样式
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
bootstrap分页插件php,bootstrap paginator分页插件使用方法
Bootstrap Paginator是一款基于Bootstrap的js分页插件,本文主要给大家介绍bootstrap paginator分页插件的两种使用方式,一起看看吧,希望能帮助到大家. 分页有 ...
Bootstrap Paginator 分页插件的使用
2019独角兽企业重金招聘Python工程师标准>>> 由于在给学生上课过程用需要用到分页操作,发现一个比较好用的分页插件,效果如下插件下载地址 :https://github. ...
php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】
本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...
ThinkPhp5使用bootstrap样式分页
1.查看分页的配置在application/config.php文件中最后. //分页配置 'paginate' => [ 'type' => 'bootstrap', 'var_pag ...
bootstrap mysql分页_bootstrap分页
使用bootstrap分页插件,如下代码是html代码分页编号标题用户 $(function () { var str = ""; var carId = 1; $.ajax( ...
bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能
本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 1,项目要引入freem ...

bootstrap的分页

bootstrap的分页相关推荐

最新文章

热门文章