後端要求
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>