angularJS实战(二)分页查询

需求如下：如何用angularJS来实现分页来查询?

看到这个需求，我们第一反应可能时是原始的js写的分页查询那样会很繁琐，既然我用了angularJS这个框架，里面肯定有可供我们使用的分页插件。

 第一步：引入相关的js和css文件

<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

第二步控件配置

	//分页控件配置
    	//currentPage 当前页码
    	//totalItems 总记录
    	//itemsPerPaeg 每页的记录数
    	//perPageOptions 分页选项
    	//onChange 当页码变更后自动触发的方法
    	$scope.paginationConf={
    			currentPage:1,
    			totalItems:10,
    			itemsPerPage:10,
    			perPageOptions:[10,20,30,40,50],
    			onChange:function(){
    				$scope.reloadList();
    			}
    	}
    	//刷新列表
    	$scope.reloadList=function(){
       $scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
    	}

 第三步：后台代码的编写（具体的代码请看在源码中看后面会贴地址)

@RequestMapping("/findPage")
	public PageResult findPage(Integer page,Integer size) {
		return brandService.findPage(page, size);
	}

 第四步：前端代码的实现

//findPage这个名字可以自定义
    	$scope.findPage=function(page,size){
    		$http.get('../brand/findPage.do?page='+page+'&size='+size).success(
    				function(response){
    					$scope.list=response.rows;//显示当前页的数据
    					$scope.paginationConf.totalItems=response.total;//更新总记录数
    		});
    	};

 第五步：前端的展示

   <tbody >
   <tr ng-repeat=" brand in list">
   <td><input  type="checkbox"></td>			                              
   <td>{{brand.id}}</td>
   <td>{{brand.name}}</td>									     
   <td>{{brand.firstChar}}</td>		                                 
   <td class="text-center">                                           
   <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>                                           
   </td>
	</tr>							 
	</tbody>
	<!--数据列表/-->                        
	 <tm-pagination conf="paginationConf"> </tm-pagination>

这里需要注意的是下面的这行代码是是显示分页的样式的代码

<tm-pagination conf="paginationConf"> </tm-pagination>

源码地址