Angular+Bootstrap+Spring Boot实现分页功能实例代码

需要用到的js

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语句中的这些数值是怎么计算得到的呢？它们就是根据1、CurrentPage 当前在哪一页 2、PageSize 每页展示多少条来的到的，因此后台需要从前端获取这两个数值。又为了告诉用户一共有多少页，我们还要3、TotalSize 一共多少条。

现在有了上面1 2 3值，我们就可以来进行分页了。在前端我们需要一个Table来帮我们展示数据，还需要一个小控件，让用户去选择第几页，而bootstrap就为我们提供了这个小控件（uib-pagination），大大减轻了我们的工作量。在后端Jpa又为我们提供了分页接口，我们只需要继承JapRepository即可，零代码量！

下面就重点看Table、uib-pagination以及JapRepository提供的接口的用法。

html页面代码：

分页是通过 uib-pagination 标签来实现的，用到标签属性有：

total-items:表示总共有多少条记录

items-per-page:每一页显示多少条记录

max-size:决定用户看到的页数，即选择页面的按钮，不理解的同学可以调整这个数值查看变化

ng-model:当前所在页面

以上4个属性的值与js双向绑定

boundary-link:显示“首页”、“末页”按钮

force-ellipses:当值为true时，超过max-size的也会以省略号的形式展现

js代码如下：

$scope.checkAll = function(checked) { angular.forEach($scope.items,function(item) { item.$checked = checked; }); }; $scope.deleteExam = function(id) { $http({ url : '/deleteexam',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,'numPerPage' : $scope.numPerPage } }).success(function(response) { $scope.TotalItems = response.totalElements; $scope.items = response.content; }); }; });

每次请求后台需要将当前页以及每页的数量发送到后台。

前台接受到的json数据是这样的

后台controller代码

getExamsByPage(@RequestParam(value = "currentPage",defaultValue = "0") Integer page,@RequestParam(value = "numPerPage",defaultValue = "10") Integer pageSize) { Sort sort = new Sort(Direction.DESC,"id");//设置排序方式 Pageable pageable = new PageRequest(page,pageSize,sort);//构建Pageable对象，改分页查询是通过jpa的PagingAndSortingRepository接口完成的 Page Exams = examrepository.findAll(pageable); return Exams; }

repository代码：

{ }

contoller中调用的findAll方法是PagingAndSortingRepository实现的，但是JpaRepository继承自PagingAndSortingRepository，因此也有findAll方法，不明白的同学可以去查阅改接口的资料。

这样就完成了分页显示，图片如下