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

分页效果：

 

 

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

 

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

 

二：准备页面容器

三：相关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 += '';
		tableShow += '
';
		tableShow += '
';
		tableShow += '';
		tableShow += '
';
		tableShow += '
' + list[i].newsTitle + '
';
		tableShow += '
';
		tableShow += '' + list[i].newsDate + '';
	}
	$('#htmlDiv').html(tableShow)
  }
});

四：后台实现

Controller：

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

	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 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, HttpStatus.OK);

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

sql语句：

        SELECT count(*) FROM news




	    SELECT * FROM news limit #{offset},#{pageSize}

 

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