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 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" class="container" style="width: 1900px;"><br><table class="table table-bordered table-hover "><thead><tr><th class="text-center"><input type="checkbox"data-ng-model="allChecked" data-ng-change="checkAll(allChecked)" /></th><th class="text-center">序号</th><th class="text-center">题目</th><th class="text-center">A</th><th class="text-center">B</th><th class="text-center">C</th><th class="text-center">D</th><th class="text-center">答案</th><th class="text-center">答题数</th><th class="text-center">正确数</th><th class="text-center">正确率</th></tr></thead><tbody><tr data-ng-repeat="item in items"><td class="text-center"><input type="checkbox"data-ng-model="item.$checked" data-ng-changed="checkedChange(item.id,item.$checked)"/></td><td class="text-center"><span data-ng-bind="$index+1"></span></td><td class="text-center"data-ng-bind="item.test"></td><td class="text-center" data-ng-bind="item.op1"></td><td class="text-center" data-ng-bind="item.op2"></td><td class="text-center" data-ng-bind="item.op3"></td><td class="text-center" data-ng-bind="item.op4"></td><td class="text-center" data-ng-bind="item.answer"></td><td class="text-center" data-ng-bind="item.total"></td><td class="text-center" data-ng-bind="item.totalCorrect"></td><td class="text-center"><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 class="text-right"><button class="btn btn-defualt" style="float: left" data-ng-click="deleteItems()">删除</button><span style="color:#ff0000;"><uib-pagination total-items="TotalItems" ng-model="currentPage" items-per-page = "numPerPage" max-size="maxSize" class="pagination" 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 style="color:#ff0000;">$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数据是这样的

{"content":[{"id":225,"test":"办公自动化是计算机的一项应用，按计算机应用分类，它属于____。","op1":"数据处理","op2":"科学计算","op3":"实时控制","op4":"辅助设计","answer":"A","total":2,"totalCorrect":1},{"id":224,"test":"软件由___和文档两部分组成。","op1":"数据","op2":"指令","op3":"程序","op4":"工具","answer":"C","total":2,"totalCorrect":1},{"id":223,"test":"为达到某一目的而编写的计算机指令序列称为____。","op1":"软件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":222,"test":"办公自动化是计算机的一项应用，按计算机应用分类，它属于____。","op1":"数据处理","op2":"科学计算","op3":"实时控制","op4":"辅助设计","answer":"A","total":2,"totalCorrect":1},{"id":220,"test":"为达到某一目的而编写的计算机指令序列称为____。","op1":"软件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":219,"test":"办公自动化是计算机的一项应用，按计算机应用分类，它属于____。","op1":"数据处理","op2":"科学计算","op3":"实时控制","op4":"辅助设计","answer":"A","total":2,"totalCorrect":1},{"id":218,"test":"软件由___和文档两部分组成。","op1":"数据","op2":"指令","op3":"程序","op4":"工具","answer":"C","total":2,"totalCorrect":1},{"id":217,"test":"为达到某一目的而编写的计算机指令序列称为____。","op1":"软件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":216,"test":"办公自动化是计算机的一项应用，按计算机应用分类，它属于____。","op1":"数据处理","op2":"科学计算","op3":"实时控制","op4":"辅助设计","answer":"A","total":2,"totalCorrect":1},{"id":215,"test":"软件由___和文档两部分组成。","op1":"数据","op2":"指令","op3":"程序","op4":"工具","answer":"C","total":2,"totalCorrect":1}],"last":false,"totalPages":9,"totalElements":86,"number":0,"size":10,"sort":[{"direction":"DESC","property":"id","ignoreCase":false,"nullHandling":"NATIVE","ascending":false}],"numberOfElements":10,"first":true}

后台controller代码

@RequestMapping(value = "/getExamsByPage")@ResponseBodypublic Page<Exam> 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<Exam> Exams = examrepository.findAll(pageable);return Exams;}

repository代码：

@Transactional
public interface ExamRepository extends JpaRepository<Exam, Integer> {}

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

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

angular+bootstrap+spring boot实现分页相关推荐

Angular 8 + Spring Boot 2.2：立即构建一个CRUD应用程序！
"我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证. 如果您已 ...
使用Angular，Ionic 4和Spring Boot构建移动应用
朋友不允许朋友写用户身份验证. 厌倦了管理自己的用户? 立即尝试Okta的API和Java SDK. 在几分钟之内即可对任何应用程序中的用户进行身份验证,管理和保护. 我是Ionic的忠实粉丝. 几年 ...
Angular 6集成Spring Boot 2,Spring Security,JWT和CORS
主要内容:Spring Boot 2的基础应用.CORS配置.Actuator监控:Spring Boot集成springfox-swagger,利用Swagger生成JSON API文档,利用Swa ...
Spring Boot面试题（2020最新版）
转载自 Spring Boot面试题(2020最新版) 概述什么是 Spring Boot? Spring Boot 是 Spring 开源组织下的子项目,是 Spring 组件一站式解决方案,主 ...
angular1.2.27_Angular 8 + Spring Boot 2.2：立即构建一个CRUD应用程序！
angular1.2.27 "我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权 ...
【2021最新版】Spring Boot面试题总结（92道题含答案解析）
文章目录 1.什么是Spring Boot? 2.为什么要用SpringBoot? 3.Spring Boot有哪些优点? 4.Spring Boot的核心注解是哪个?它主要由哪几个注解组成的? 5. ...
【笔记】Spring Boot
尚硅谷-SpringBoot2核心技术与响应式编程文章目录一.Spring与SpringBoot 1.Spring能做什么 2.Spring的生态 3.Spring5重大升级 1.响应式编程 2. ...
Spring、Spring MVC、Spring boot、Spring Cloud面试题（史上最全面试题，精心整理100家互联网企业，面试必过）
最全面试题,精心整理100家互联网企业面经,祝你面试成功.面试必过(2023优化版)已发布在个人微信公众号[面向Offer学编程],优化版首先修正了读者反馈的部分答案存在的错误,同时根据最新面试总结, ...
这 10 道 Spring Boot 常见面试题你需要了解下
点击上方"方志朋",选择"置顶或者星标" 你的关注意义重大! 本文转载于公众号:Java团长 1.什么是Spring Boot? 多年来,随着新功能的增加,sp ...

angular+bootstrap+spring boot实现分页

angular+bootstrap+spring boot实现分页相关推荐

最新文章

热门文章