如果这篇文章能给你带来帮助，不胜荣幸，如果有不对的地方也请批评指正 共同进步，废话不多说直接上代码。
首先来讲你可以使用page的分页插件，也可以不使用我没有使用，所以得展示部分sql语句。总体来说sql语句的代码就是：select * from table where 1=1 limit start,num
其中start为起始下标，num为展示多少条。具体看下面
<select id="selectByPageBean" resultMap="BaseResultMap"> select * from registration_of_cases where 1=1 limit #{pageBean.start},#{pageBean.pageSize} </select>
然后需要创建一个分页类：分页累的作用就是简单地给你进行一下计算，比如说传入当前的页数 可以得到查询的起始位置等等不在一一赘述，看代码
package com.social.util;
import java.util.List;
public class PageBean {
private int pageSize = 5;//每页数量
private int pageNum = 1;//默认当前是第一页
private int total = 0;//总条数
private int totalPage = 0;//总页数
private int start = 0;//起始位置
private List rows;//接受数据的集合
private String url="";//请求的路径
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public int getTotalPage() {
int pageCount = 0;
if(total%pageSize==0) {
pageCount=total/pageSize;
}else {
pageCount=total/pageSize+1;
}
totalPage = pageCount;
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getStart() {
start = (pageNum-1)*pageSize;
return start;
}
public void setStart(int start) {
this.start = start;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
@Override
public String toString() {
return "PageBean [pageSize=" + pageSize + ", pageNum=" + pageNum + ", total=" + total + ", totalPage="
+ totalPage + ", start=" + start + ", rows=" + rows + ", url=" + url + "]";
}
}
在写这个之前，还得写一个查询所有的方法，如果你牛逼其实一个方法也可以，这篇文章就是给基础的看的。接着往下
后台的工作目前做到这里就算差不多的了 现在来看一下前台界面你需要写一部分js 上代码：
首先引入相关的js和css样式 例如：
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> <script src="plugins/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="plugins/angularjs/pagination.css"> <script type="text/javascript" src="plugins/angularjs/pagination.js"></script> <script type="text/javascript" src="plugins/angularjs/angular.min.js"></script>
然后接着上具体的前段代码 部分解释代码中见：
<script type="text/javascript">
var app = angular.module(‘lfxr‘, [ ‘pagination‘ ]);//其中pagination 对应的是 pagination.js里面的值
app.controller(‘FirstController‘, function($scope, $http) {
//声明方法
$scope.findAll = function() {
//发送请求 得到相应和返回的结果
$http.get(‘http://localhost:80/mysocial/pagefind‘).success(function(response) {
$scope.list = response.row;//用list容器来接受得到的结果 其中这个response跟后台返回的数据相对应
});
}
//初始化和点击时给部分分页的参数进行一个赋值
$scope.paginationConf = {
currentPage : 1,//当前页
totalItems : 20,//总数
itemsPerPage : 5,//每页个数
perPageOptions : [ 5, 10, 15, 20, 50 ],//分页选项
onChange : function() {//当更改页码时，自动触发分页查询方法
$scope.reloadlist();
}
};
//有改变的时候调用重新加载的方法
$scope.reloadlist = function() {//方法里面有两个参数 当前页和每页多少条
$scope.findPage($scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage);
}
//根据条件进行分页查询
$scope.findPage = function(pageNum, pageSize) {
$http.get(
‘http://localhost:80/mysocial/pagefind?pageNum=‘ + pageNum + ‘&pageSize=‘
+ pageSize + ‘‘).success(function(response) {
$scope.list = response.rows;//显示当前页数据
$scope.paginationConf.totalItems = response.total;//更新总记录数
});
}
});
</script>
具体的html界面上的代码：
<tr ng-repeat="entity in list"> <!-- 你可以吧repeat当成foreach来理解 其中 list是上面接收的集合 entity是用来循环展示的变量 -->
<td><input type="checkbox"></td>
<td>{{entity.unitName}}</td> <!-- 通过对象.属性的方式来进行一个展示数据 -->
<td>{{entity.organizationalCode}}</td>
<td>{{entity.nameOfTheComplainant}}</td>
</tr>
<!-- 最后在你的前台html界面上进行一个插件html的引入-->
<tm-pagination conf="paginationConf"></tm-pagination>
最后展示后台代码：查询所有的的代码我就不展示了，反正也是得返回一个pagebean 要不然你前台获取的时候获取不到相对应的值
·
@RequestMapping("/pagefind")
@ResponseBody
public PageBean pagefind(Integer pageNum,Integer pageSize){
PageBean pageBean = new PageBean();
pageBean.setPageSize(pageSize);
pageBean.setPageNum(pageNum);
List<RegistrationOfCases> selectByPageBean = firstService.selectByPageBean(pageBean);
pageBean.setRows(selectByPageBean);
pageBean.setTotal(selectByPageBean.size());
return pageBean;
}
原文：https://www.cnblogs.com/lifan666/p/angular.html