angular.js（用angular.min.js会导致分页控件不显示）
ui-bootstrap-tpls.min.js
angular-animate.js
需要用到的css
bootstrap.min.css
由于本项目使用了路由，所以讲js以及css文件的应用都放在一个主html，请同学们在html页面中添加以上文件
在开始之前，我先简单介绍下分页的原理。
分页的实质其实就是一条sql语句，
比如查找第二页，即第16到第30条数据
在MySQL中是select * from table limit 15,15 order by id desc
Sql server中是select * from (select top 15 * from (select top (30) * from table order by id desc) order by available asc) order by id desc Oracle是（oracle中的row从1开始）：select * from (select a.*,rownum from (select * from tablet order by id desc) a ) b where b.rownum between 16 and 30
一般情况下，查询得到的数据采用倒序排序，这样可以将用户最新插入的数据放在最前面。
那么这三条sql语句中的这些数值是怎么计算得到的呢？它们就是根据1、CurrentPage 当前在哪一页 2、PageSize 每页展示多少条 来的到的，因此后台需要从前端获取这两个数值。又为了告诉用户一共有多少页，我们还要3、TotalSize 一共多少条 。
现在有了上面1 2 3值，我们就可以来进行分页了。在前端我们需要一个Table来帮我们展示数据，还需要一个小控件，让用户去选择第几页，而bootstrap就为我们提供了这个小控件（uib-pagination），大大减轻了我们的工作量。在后端Jpa又为我们提供了分页接口，我们只需要继承JapRepository即可，零代码量！
下面就重点看Table、uib-pagination以及JapRepository提供的接口的用法。
html页面代码：
<div data-ng-controller="QuestionCtrl"> <br> <table> <thead> <tr> <th><input type="checkbox" data-ng-model="allChecked" data-ng-change="checkAll(allChecked)" /></th> <th>序号</th> <th>题目</th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>答案</th> <th>答题数</th> <th>正确数</th> <th>正确率</th> </tr> </thead> <tbody> <tr data-ng-repeat="item in items"> <td><input type="checkbox" data-ng-model="item.$checked" data-ng-changed="checkedChange(item.id,item.$checked)"/></td> <td><span data-ng-bind="$index+1"></span></td> <td data-ng-bind="item.test"></td> <td data-ng-bind="item.op1"></td> <td data-ng-bind="item.op2"></td> <td data-ng-bind="item.op3"></td> <td data-ng-bind="item.op4"></td> <td data-ng-bind="item.answer"></td> <td data-ng-bind="item.total"></td> <td data-ng-bind="item.totalCorrect"></td> <td> <span data-ng-if="item.total!=0" data-ng-bind="item.totalCorrect / item.total * 100 | number:2 "></span> <span data-ng-if="item.total==0" data-ng-bind="0"></span> %</td> </tr> </tbody> </table> <div> <button data-ng-click="deleteItems()">删除</button> <span><uib-pagination total-items="TotalItems" ng-model="currentPage" items-per-page = "numPerPage" max-size="maxSize" first-text="首页" previous-text="上一页" next-text="下一页" last-text="末页" boundary-links="true" ng-change="pageChanged()" force-ellipses="false"></uib-pagination></span> </div> </div>
分页是通过 uib-pagination 标签来实现的，用到标签属性有：
total-items:表示总共有多少条记录
items-per-page:每一页显示多少条记录
max-size:决定用户看到的页数，即选择页面的按钮，不理解的同学可以调整这个数值查看变化
ng-model:当前所在页面
以上4个属性的值与js双向绑定
boundary-link:显示“首页”、“末页”按钮
force-ellipses:当值为true时，超过max-size的也会以省略号的形式展现
js代码如下：
var app = angular.module("APP",['ui.bootstrap', 'ngAnimate']); app.controller('QuestionCtrl', function($scope, $uibModal, $http) { <span>$scope.currentPage = 1;//当前页 $scope.numPerPage = 15; $scope.maxSize = 5; $http({ url : '/getExamsByPage', method : 'post', params : { 'currentPage' : $scope.currentPage - 1, 'numPerPage' : $scope.numPerPage } }).success(function(response) { $scope.TotalItems = response.totalElements; $scope.items = response.content; }); $scope.pageChanged = function() { $http({ url : '/getExamsByPage', method : 'post', params : { 'currentPage' : $scope.currentPage - 1, 'numPerPage' : $scope.numPerPage } }).success(function(response) { $scope.TotalItems = response.totalElements; $scope.items = response.content; }); }</span> $scope.checkAll = function(checked) { angular.forEach($scope.items, function(item) { item.$checked = checked; }); }; $scope.deleteExam = function(id) { $http({ url : '/deleteexam', method : 'post', params : { 'id' : id, 'currentPage' : $scope.currentPage - 1, 'numPerPage' : $scope.numPerPage } }).success(function(response) { $scope.TotalItems = response.totalElements; $scope.items = response.content; }); } $scope.deleteItems = function() { var checkedlist = new Array(); angular.forEach($scope.items, function(item) { if (item.$checked == true) checkedlist.push(item.id); }); $http({ url : "/deleteexams", method : "post", params : { 'ids' : checkedlist, 'currentPage' : $scope.currentPage - 1, 'numPerPage' : $scope.numPerPage } }).success(function(response) { $scope.TotalItems = response.totalElements; $scope.items = response.content; }); }; });
每次请求后台需要将当前页以及每页的数量发送到后台。
前台接受到的json数据是这样的