bootstrap-paginator分页（前后端实现）

分页效果：

bootstrap-paginator下载地址：http://plugins.jquery.com/bootstrap-paginator/

一：引入相关的js、css文件

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

二：准备页面容器

<!-- 分页容器：显示数据 -->
<div id="htmlDiv"></div>
<!-- 分页容器： 显示分页按钮-->
<div class="col-lg-12" align="center">
<!-- 注意:3版本的分页容器标签是<ul>，2版本的容器标签是<div> -->
	<ul id="mypage"></ul>
</div>

三：相关js

$(function() {
	
	pageStart();//开始分页
		
		
	function pageStart() {//分页函数
		$.ajax({ //去后台查询第一页数据
			type : "get",
			url : "/intmote/news.do",
			dataType : "json",
			data : {page : '1'}, //参数：当前页为1
			success : function(data) {
					
				appendHtml(data.list)//处理第一页的数据
					
				var options = {//根据后台返回的分页相关信息，设置插件参数
					bootstrapMajorVersion : 3, //如果是bootstrap3版本需要加此标识，并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本，则DOM包含元素是DIV
					currentPage : data.page, //当前页数
					totalPages : data.totalPage, //总页数
					numberOfPages : data.pageSize,//每页记录数
					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) {//分页按钮点击事件
						$.ajax({//根据page去后台加载数据
							url : "/intmote/news.do",
							type : "get",
							dataType : "json",
							data : {"page" : page},
							success : function(data) {
								appendHtml(data.list);//处理数据
							}
						});
				 }
				};
				$('#mypage').bootstrapPaginator(options);//设置分页
			}
		});
	}

	function appendHtml(list) {//此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
		var tableShow = '';
		for (var i = 0; i < list.length; i++) {
			tableShow += '<a href="news/'+list[i].id+'.do">';
			tableShow += '<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left" style="border-top: 0px">';
			tableShow += '<div class="am-u-sm-4 am-list-thumb">';
			tableShow += '<img src="'+list[i].newsUrl+'"/>';
			tableShow += '</div><div class=" am-u-sm-7 am-list-main">';
			tableShow += '<h3 class="am-list-item-hd">' + list[i].newsTitle + '</h3>';
			tableShow += '</div></li><div class="newsico am-fr">';
			tableShow += '<i class="am-icon-clock-o  am-hide-sm-only">' + list[i].newsDate + '</i></div></a>';
		}
		$('#htmlDiv').html(tableShow)
	}
});

四：后台实现

Controller：

@GetMapping("news")
	@ResponseBody
	public ResponseEntity<Map<String, Object>> news(
			@RequestParam("page") int page) {
		Map<String, Object> map = new HashMap<String, Object>();

		int pageSize = 3;// 每页显示条数

		try {
			int count = newsService.count();// 获取总条目数
			int totalPage = count / pageSize;// 计算总页数
			if (count % pageSize != 0) {// 不满一页的数据按一页计算
				totalPage++;
			}

			if (page > totalPage)// 当页数大于总页数，直接返回
				return null;

			int offset = (page - 1) * pageSize;// 计算sql需要的起始索引
			List<News> list = newsService.getPage(offset, pageSize);// 根据起始索引和页面大小去查询数据

			// 封装数据，并返回
			map.put("page", page);
			map.put("pageSize", pageSize);
			map.put("totalPage", totalPage);
			map.put("list", list);

			return new ResponseEntity<Map<String, Object>>(map, HttpStatus.OK);

		} catch (Exception e) {
			log.error("获取分页数据失败", e);
			return new ResponseEntity<Map<String, Object>>(
					HttpStatus.INTERNAL_SERVER_ERROR);
		}
	}

sql语句：

<!-- 查询总记录数 -->
<select id="count" resultType="int">
        SELECT count(*) FROM news
</select>

<!-- 查询分页数据 -->
<select id="getPage" resultType="com.mote.pojo.News">
	    SELECT * FROM news limit #{offset},#{pageSize}
</select>

tip:有问题欢迎大家评论留言