angularJS实战(二)分页查询

妖狐艹你老母 2022-02-20 12:38 308阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70 1][]

第一步：引入相关的js和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>

### [源码地址][Link 1] ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70]: /images/20220220/f4ceaf3c92ba42e4a800b58a547d7a46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70 1]: /images/20220220/e39367f325e0447d87a6e59a3c3368c6.png
[Link 1]: https://github.com/issueDriver/pinyougou