Bootstrap Paginator分页

效果图展示：

一：准备Paginator相关的js、css文件

下载地址：https://github.com/lyonlai/bootstrap-paginator/releases

二：页面引入相关文件

<link type="text/css" rel="stylesheet" href="bootstrap.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-paginator.js"></script>

三：准备页面元素

页面两个div，一个用于拼接html，一个放分页按钮代码

<div id="htmlDiv"></div>
<div align="center">
     <!-- 分页控件，标签必须是<ul> -->
     <ul id="pageButton"></ul>
</div>

四：js代码

// 初始化页面 
getPageOfMemo(1);

// 分页函数,参数为当前页码
function getPageOfMemo(page) {
	
	// 获取搜索相关参数
	var beginTime = $("#beginTime").val();
	var endTime = $("#endTime").val();
	var organId = $("#organId").val();
	var personName = $("#personName").val();

	$.ajax({
		url : "/bison/getDataPage",
		type : "POST",
		data : {
			"page" : page, // 当前页码 (作为参数传给后台，后台根据这个参数来进行分页)
			"personName" : personName, //以下是搜索相关的参数
			"sleepStartTime" : beginTime,
			"sleepStopTime" : endTime,
			"organId" : organId,
		},
		dataType : "json",
		success : function(data) {
			var totalPages;
			if (data != null) {
				totalPages = data.totalPages;
				var htm = "";
				$.each(data.sList, function(i, item) {
                                        //遍历数据,拼接html
					htm += "<div class='row'><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'><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><p>及格</p>";
					htm += "</div></div><div class='sleep7'>详情</div>";
					htm += "</div></div>";

				});
				$('#htmlDiv').html(htm); //将拼接好的html追加到页面的div容器中
                                //定义分页按钮相关元素
				var element = $('#pageButton');
				var options = {
					bootstrapMajorVersion : 3, //对应的bootstrap版本
					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;
						}
					},
					// 点击分页按钮事件
					onPageClicked : function(event, originalEvent, type, page) {
						getPageOfMemo(page);
					}
				};
				element.bootstrapPaginator(options);
			}
		}
	});
};

五：Controller代码

        @RequestMapping(value = "/getDataPage", method = RequestMethod.POST)
	@ResponseBody
	public Map<String,Object> getPage(SleepAvgData param,
			HttpServletRequest request) {
		
		Map<String, Object> map = new HashMap<String,Object>();
		
		// 定义每页显示多少条记录
		int pageSize = 2;
		// 查询总共多少条记录
		int total = mattessStatsService.countNumb();
		// 计算有多少页
		int totalPages = total / pageSize;
		if (total % pageSize != 0) {
			totalPages++;
		}
		
		map.put("totalPages", totalPages);
		
		//设置分页语句limit后面需要的参数     sql语句：select * from table limit #{offset},#{size}
		param.setSize(pageSize);
		param.setOffset((param.getPage() - 1)*pageSize);
			
		// 查询当前页数据
		List<SleepAvgData> sList = mattessStatsService.getList(param);
		map.put("sList", sList);
		
		return map;
	}

六：对象主要看分页相关的参数就ok （代码太多，省略了set和get函数）

public class SleepAvgData {
	
	private Integer id;
	private Integer sleepQuality; 
	private String sleepStartTime; 
	private String sleepStopTime; 
	private Integer heart;       
	private Integer breath;   
	private Integer bodyMove;    

	private String personName;
	private String organId;
	private String organName;
	private String personSex;
	private String personAge;
	private String headUrl;
	private String companyId;
	
	private int size;//用于分页    定义sql语句limit的大小
	private int offset;//用于分页   定义sql语句limit的起始索引
	private int page; //用于分页   接收前端传过来的page
	
}

七：相关sql

        <select id="countNumb" resultType="int">
		SELECT COUNT(1) FROM acl_sleep
	</select>

	<select id="getList" resultType="com.threegrand.bison.stats.model.SleepAvgData">
		SELECT a.*,b.person_sex, b.head_url, b.organ_name, b.person_name
		FROM
		acl_sleep a,acl_personinfo b
		WHERE
		a.uuid = b.sleep_uuid
		<if test="personName !=null and personName != ''">
			AND b.person_name like '%${personName}%'
		</if>
		<if test="organId !=null and organId != ''">
			AND b.organ_id=#{organId}
		</if>
		<if test="sleepStartTime !=null and sleepStartTime != ''">
			AND UNIX_TIMESTAMP(a.sleep_start_time) >
			UNIX_TIMESTAMP(#{sleepStartTime})
		</if>
		<if test="sleepStopTime !=null and sleepStopTime != ''">
			AND UNIX_TIMESTAMP(a.sleep_stop_time) <
			UNIX_TIMESTAMP(#{sleepStopTime})
		</if>
		LIMIT #{offset},#{size}
	</select>

注释：css和部分jsp内容就不再往上堆了，代码太多看起来也很烦躁

Bootstrap Paginator分页

猜你喜欢