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


Posted in Javascript onJuly 21, 2017

需要用到的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实现分页功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 #Javascript
VUE中使用Vue-resource完成交互
Jul 21 #Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 #Javascript
js图片轮播插件的封装
Jul 21 #Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 #Javascript
AngularJS中使用three.js的实例详解
Jul 21 #Javascript
Axios学习笔记之使用方法教程
Jul 21 #Javascript
You might like
php模板之Phpbean的目录结构
2008/01/10 PHP
PHP开发负载均衡指南
2010/07/17 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python抽象类的新写法
2015/06/18 Python
python运行其他程序的实现方法
2017/07/14 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
基于python使用tibco ems代码实例
2019/12/20 Python
python Canny边缘检测算法的实现
2020/04/24 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
人民教师的自我评价分享
2014/02/21 职场文书
师范生自荐信模板
2014/05/28 职场文书
运动会口号8字
2014/06/07 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
大学入学感言
2015/08/01 职场文书
python删除csv文件的行列
2021/04/06 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技