一、后端使用 PageHelper插件
【1】引入 PageHelper jar包(Maven项目)
1 <dependency>
2 <groupId>com.github.pagehelper</groupId>
3 <artifactId>pagehelper</artifactId>
4 </dependency>
【2】MyBatis 配置文件中配置插件(通过 Spring 配置中的 sqlsessionfactory 对此配置文件加载,将PageHelper加载到容器中)
1 <plugins>
2 <!-- com.github.pagehelper 为 PageHelper 类所在包名 -->
3 <plugin interceptor="com.github.pagehelper.PageHelper">
4 <!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库-->
5 <property name="dialect" value="mysql"/>
6 </plugin>
7 </plugins>
【3】Server 类中使用插件(重要)
1 @Override
2 public PageResult findPage(int pageNum, int pageSize) {
3 /*@desc 使用插件进行分页处理 插件对分页的处理(重要)
4 *@parameter: pageNum:页码,pageSize:每页显示记录数
5 */
6 PageHelper.startPage(pageNum, pageSize);
7 //查询结果封装到Page类中,通过Total获取总记录数,Result获取查询的记录数(记录数=pageSize)
8 Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);
9 return new PageResult(page.getTotal(),page.getResult());
10 }
二、前端使用分页插件(pagination.js),前端使用AngularJs框架
【1】引入 pagination.js 和 pagination.css
☞ pagination.js下载地址:https://download.csdn.net/download/lostchris/9425230
☞ pagination.css下载地址:https://download.csdn.net/download/zhengzhaoyang122/10641792
==== 具体注释说明====
1 <script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
2 <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
3 <script type="text/javascript">
4 //1、查询模块需要依赖pagination pagination模块在JS中有定义
5 var app = angular.module(\'pinyougou\', [\'pagination\']);
6 app.controller(\'brandController\', function($scope, $http) {
7 $scope.findAll = function() {
8 $http.get(\'../brand/findAll.do\').success(function(response) {
9 $scope.brandList = response;
10 });
11 }
12 //2、需要在table结束后添加页数显示标签tm-pagination 并定义conf(位于博客最后)
13 /*3、将2中定义的conf变量,进行赋值
14 currentPage : 页码,
15 totalItems : 总记录数,
16 itemsPerPage : 每页显示记录数,
17 perPageOptions : 需要每页显示多少记录,用户可自定义,
18 onChange : 当页码发生变化时,出发事件。
19 */
20 //分页控件配置
21 $scope.paginationConf = {
22 currentPage : 1,
23 totalItems : 10,
24 itemsPerPage : 10,
25 perPageOptions : [ 10, 20, 30, 40, 50 ],
26 onChange : function() {
27 $scope.reloadList();//重新加载
28 }
29 };
30
31 //重新加载列表 数据
32 $scope.reloadList = function() {
33 //切换页码
34 $scope.findPage($scope.paginationConf.currentPage,
35 $scope.paginationConf.itemsPerPage);
36 }
37
38 //需要将查询结果 进行赋值,例如总记录数totalItems
39 $scope.findPage = function(page, rows) {
40 $http.get(\'../brand/findPage.do?pageNum=\' + page + \'&size=\' + rows)
41 .success(function(response) {
42 $scope.brandList = response.rows;//需要遍历的对象
43 $scope.paginationConf.totalItems = response.total;//总记录数
44 });
45 }
46 });
【2】页面中 分页栏 显示标签代码如下:(位置是 table 结束后)
1 </table>
2 <!-- 分页显示栏 -->
3 <tm-pagination conf="paginationConf"></tm-pagination>