Bootstrap-paginator + PageHelper 前后台分页对接

目录

一、bootstrap-paginator 简介

二、bootstrap-paginator + PageHelper 前后台分页的实现

---

一、bootstrap-paginator 简介

1.先导入相关的 bootstrap 、jquery、bootstrap-paginator 相关 css+js 文件，本文后面提供百度云下载链接。

2.在 body 标签里面写下以下代码：

3.这样就行了，项目使用，请自行修改一些动态参数。以下是效果图：

4.下面是提供整个 bootstrap 的分页插件代码的百度云链接，下载后可直接预览，已经整理过，可读性强。

链接: https://pan.baidu.com/s/114GSiHCX2xtrLRUk1yL6qw 密码: a2k9

二、bootstrap-paginator 前后台分页的实现

1、导入相关的静态资源

2、存放分页框的 html 代码

3、JS 代码

前台后的交互，这里采用的 ajax ，如果不清楚什么是 ajax 的话，可以去学下。通过 ajax 拿到后台的数据之后，需要自己渲染到 html 代码中，具体怎么渲染根据自己的需求去渲染。

4、后台代码

后台采用的是 PageHelper 分页插件，不知道怎么用的，可以看另外一篇博客的介绍。

Java 分页插件 PageHelper 的配置及使用

@RequestMapping(value="/getlist")
public Map getListInfo(int page)throws IOException{
	//PageHelper 后台分页插件
	PageHelper.startPage(page, 10);
	Map modelMap = new HashMap();
	//从数据库中查询出数据
	List list = userService.displayAllUser();
	PageInfo pageInfo = new PageInfo(list);
	int totalPage = pageInfo.getPages();//总页数

	modelMap.put("page", page);
	modelMap.put("list", list);
	modelMap.put("totalPage", totalPage);
	modelMap.put("pageSize",10 );
	
	return modelMap;
}

同类型文章推荐：

Jquery 分页插件， 带你一步一步接入后台数据