AngularJS分页插件的使用

素颜马尾好姑娘i 2022-04-17 05:17 437阅读 0赞

## 最终效果： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzk2MDE3_size_16_color_FFFFFF_t_70]

### 先查全部 ###

#### 1.后端 ####

我们需要建立一个实体类，PageResult.java（加上get,set方法和构造方法，实现序列化）  
定义 总页数和行数

package entity;
    
    import java.io.Serializable;
    import java.util.List;
    
    /** * 分页总结果，总页数和行数 * @author zly * */
    public class PageResult implements Serializable { 
    	private long total;
    	private List rows;
    
    	public PageResult(long total, List rows) { 
    		super();
    		this.total = total;
    		this.rows = rows;
    	}
    
    	public long getTotal() { 
    		return total;
    	}
    
    	public void setTotal(long total) { 
    		this.total = total;
    	}
    
    	public List getRows() { 
    		return rows;
    	}
    
    	public void setRows(List rows) { 
    		this.rows = rows;
    	}
    
    }

通过controller,service,serviceimpl查询到所有数据后，最后通过alibaba的fastjson返回的是json数据，格式如下：

[{ 
    	"firstChar": "L",
    	"id": 1,
    	"name": "联想"
    }, { 
    	"firstChar": "Y",
    	"id": 25,
    	"name": "优衣库"
    }]

#### 2.前台显示 ####

前台展示需要写angularjs指令，主要是在body标签里写，然后和script里的而对应  
ng-app=“pinyougou”----可以写成项目名称

ng-controller=“brandController”----可以写成模块名称

ng-init=“findAll()”----作用是随页面加载

ng-repeat=“entity in list”----遍历，相当于jstl表达式中的<for:each>

ng-click=“findPage()”----事件，相当于js里的onclick

###### js部分： ######

###### body部分： ######

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController" ng-init="findAll()">
    	<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
    		<thead>
    			<tr>
    				<th class="" style="padding-right: 0px"><input id="selall" type="checkbox" class="icheckbox_square-blue"></th>
    				<th class="sorting_asc">品牌ID</th>
    				<th class="sorting">品牌名称</th>
    				<th class="sorting">品牌首字母</th>
    				<th class="text-center">操作</th>
    			</tr>
    		</thead>
    		<tbody>
    			<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">
    					<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改</button>
    				</td>
    			</tr>
    		</tbody>
    	</table>
    </body>

### 后处理分页 ###

#### 1.后端 ####

通过传（int pageNum, int pageSize）两个参数（当前第几页，每个个数），通过方法进接口，再进实现类，通过分页插件，得到想要的分页数据。这里仅贴出实现类serviceimpl的代码：

package com.pinyougou.sellergoods.service.impl;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    
    import com.alibaba.dubbo.config.annotation.Service;
    import com.github.pagehelper.Page;
    import com.github.pagehelper.PageHelper;
    import com.pinyougou.mapper.TbBrandMapper;
    import com.pinyougou.pojo.TbBrand;
    import com.pinyougou.sellergoods.service.BrandService;
    
    import entity.PageResult;
    @Service
    public class BrandServiceImpl implements BrandService { 
    
    	@Autowired
    	private TbBrandMapper brandMapper;
    	//查询全部品牌
    	@Override
    	public List<TbBrand> findAll() { 
    
    		return brandMapper.selectByExample(null);
    	}
    	//分页查询
    	@Override
    	public PageResult findPage(int pageNum, int pageSize) { 
    		//mybatis的分页插件
    		PageHelper.startPage(pageNum, pageSize);
    		//查数据，返回成Page，强转一下
    		Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);
    		//返回值
    		return new PageResult(page.getTotal(), page.getResult());
    	}
    
    }

#### 2.前台部分 ####

###### js部分 ######

先引入angularjs的分页插件  
插件下载:[https://download.csdn.net/download/qq\_37796017/10782452][https_download.csdn.net_download_qq_37796017_10782452]

<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    
    
    <script type="text/javascript">
    	var app = angular.module('pinyougou', [ 'pagination' ]);
    	app.controller('brandController', function($scope, $http) { 
    		//查询所有的品牌
    		$scope.findAll = function() { 
    			$http.get('../brand/findAll.do').success(function(response) { 
    				$scope.list = response;
    			});
    		}
    		//初始化和点击时调用刷新列表
    		$scope.paginationConf = { 
    			currentPage : 1,//当前页
    			totalItems : 10,//总数
    			itemsPerPage : 10,//每页个数
    			perPageOptions : [ 10, 20, 30, 40, 50 ],//分页选项
    			onChange : function() { //当更改页码时，自动触发事件
    				$scope.reloadlist();
    			}
    		};
    		//刷新列表
    		$scope.reloadlist = function() { 
    			$scope.findPage($scope.paginationConf.currentPage,
    					$scope.paginationConf.itemsPerPage);
    		}
    		//分页
    		$scope.findPage = function(pageNum, pageSize) { 
    			$http.get(
    					'../brand/findPage.do?pageNum=' + pageNum + '&pageSize='
    							+ pageSize + '').success(function(response) { 
    				$scope.list = response.rows;//显示当前页数据
    				$scope.paginationConf.totalItems = response.total;//更新总记录数
    			});
    		}
    	});
    </script>

###### body部分 ######

1.在table下加上，用来调用和显示分页

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

2.把body标签里的 ng-init=“findAll()” 去掉

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzk2MDE3_size_16_color_FFFFFF_t_70]: /images/20220417/4ca9a9b6d56e40fe95ac7b723b35ed97.png
[https_download.csdn.net_download_qq_37796017_10782452]: https://download.csdn.net/download/qq_37796017/10782452