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:有问题欢迎大家评论留言