需要用到的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") 
 @ResponseBody 
 public 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  # bootstrap  # spring  # boot  # 分页  # SpringBoot与Angular2的集成示例  # Spring Boot+AngularJS+BootStrap实现进度条示例代码  # 玩转spring boot 结合AngularJs和JDBC（4）  # 玩转spring boot 结合jQuery和AngularJs（3）  # 详解springboot和vue前后端分离开发跨域登陆问题  # SpringBoot+Vue.js实现前后端分离的文件上传功能  # vue+springboot前后端分离实现单点登录跨域问题解决方法  # spring boot+vue 的前后端分离与合并方案实例详解  # springboot+angular4前后端分离 跨域问题解决详解  # 数据处理  # 计算机应用  # 办公自动化  # 两部分  # 放在  # 每页  # 文档  # 首页  # 末页  # 小编  # 又为  # 也有  # 下一页  # 在此  # 是这样  # 上一页  # 是怎么  # 当前页  # 不明白 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  宙斯浏览器怎么屏蔽图片浏览 节省手机流量使用设置方法  详解vue.js组件化开发实践  如何在云指建站中生成FTP站点？  Python3.6正式版新特性预览  制作公司内部网站有哪些,内网如何建网站？  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】  怎么用AI帮你设计一套个性化的手机App图标？  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  Laravel如何使用Service Container和依赖注入？（代码示例）  Laravel如何处理文件下载请求？（Response示例）  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  想要更高端的建设网站，这些原则一定要坚持！  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  轻松掌握MySQL函数中的last_insert_id()  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  Laravel中的withCount方法怎么高效统计关联模型数量  香港服务器选型指南：免备案配置与高效建站方案解析  Mybatis 中的insertOrUpdate操作  如何自定义建站之星网站的导航菜单样式？  Laravel如何使用Vite进行前端资源打包？（配置示例）  长沙企业网站制作哪家好,长沙水业集团官方网站？  详解MySQL数据库的安装与密码配置  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  香港网站服务器数量如何影响SEO优化效果？  Laravel如何处理异常和错误？（Handler示例）  如何快速上传自定义模板至建站之星？  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  如何快速搭建高效服务器建站系统？  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  如何实现建站之星域名转发设置？  简单实现Android验证码  Python文件操作最佳实践_稳定性说明【指导】  Python面向对象测试方法_mock解析【教程】  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  如何快速搭建安全的FTP站点？  Laravel如何与Inertia.js和Vue/React构建现代单页应用  Python文件异常处理策略_健壮性说明【指导】