Angular实现分页_angular 分页-CSDN博客

本文链接：https://blog.csdn.net/JavaSupeMan/article/details/104545079

后端要求

1.导入依赖

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
        </dependency>

2.创建一个pojo，必须序列化,包含get，set方法，有参无参构造方法

public class PageResult implements Serializable {
    //总记录数
    private long total;
//    当前页结果，注意：不包括查询的集合，只是包含了其他信息，第几页，每页第几条到第几天的编号等等
    private List rows;

3.写接口

public interface BrandService {
    //分页获取 分页列表
    public PageResult findPage(int pageNum,int pageSize);

}

4.写实现类

    @Override
	//参数1：第几页，参数2：每页显示几条
    public PageResult findPage(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum,pageSize); //设置是第几页，每页显示几条
         //使用逆向工程的方法来查询全部封装给page，但是返回的不是page，页面是靠底层来查相应的集合的
        Page<TbBrand> page = (Page)brandMapper.selectByExample(null);
       //返回PageResult对象
        return new PageResult(page.getTotal(),page.getResult());
    }

页面部分代码：

前提：导入angular.js ，angular.css ， jquery ，分页类库js

思路：1.定义模块，创建控制器

2.通过标签引入分页插件，conf的值是用来拿页面传回来的两个参数，第几页，每页显示几条

3.创建控制器

4.写接口方法，给页面传入初始的值

5.写分页必须的参数，并给初始值

6.写findPage方法，在改变页码的时候会调用，传入通过paginationConf拿到的页面的两个属性，第几页，每页显示几条

7.在页面遍历输出集合

代码中按注解步骤写就行

	<script src="../plugins/angularjs/angular.min.js"></script>
	<!--angular分页类库-->
	<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
	<link href="../plugins/angularjs/pagination.css" rel="stylesheet">
    <script>
		// 增加了分页插件要引入模块【】不能再为空
        
        //第一步 定义模块
		var app = angular.module('youlexuan',['pagination']);
        //第二步 创建控制器
		app.controller('Brand',function ($scope,$http) {
            

            //第四步，写分页必须的参数，并给初始值
            $scope.paginationConf={
				//1. 当前页
				currentPage:1,
				//2. 总记录数
				totalItems:10,
                //3. 每页显示记录数
                itemsPerPage:6,
                //4. 每页显示的记录数调整
				perPageOptions:[5,10,30,40],
                //5. 当页面点击分页插件时，自动调用该方法
				onChange:function () {
					$scope.reloadList();
                }
            }
            //第五步 定义该方法，传入通过paginationConf拿到的页面的两个属性，第几页，每页显示几条
            $scope.reloadList=function(){
     $scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage)
            }
            
                        //第六步写异步方法
			$scope.findPage=function (page,rows) {
				$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(function (response) {
					$scope.list=response.rows;
					// 服务端传来的总记录数
					$scope.paginationConf.totalItems=response.total;
                })
            }



        })
	</script>
</head>

<!-- 注意名字要和自己定义的一样 -->
<body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan" ng-controller="Brand" >

    <!-- 第七步，遍历输出  -->
			                          <tr ng-repeat="entity in list">
			                              <td><input  type="checkbox" ></td>			                              
				                          <td>{{entity.id}}</td>
									      <td>{{entity.name}}</td>
		                                  <td>{{entity.firstChar}}</td>
		                                  <td class="text-center">                       
			             
                                              
    <!-- 第三步：放入分页插件，并给一个conf属性，用来获取页面上传来的两个参数，第几页和每页显示几条  -->
						<tm-pagination conf="paginationConf"></tm-pagination>

  
</body>
</html>