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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
javascrip关于继承的小例子
May 10 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
php集成开发环境详解
2019/09/24 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
JS版网站风格切换实例代码
2008/10/06 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
js创建数组的简单方法
2016/07/27 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
在Linux下调试Python代码的各种方法
2015/04/17 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
美术教学感言
2014/02/22 职场文书
理发店策划方案
2014/06/05 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
职工宿舍管理制度
2015/08/05 职场文书
2016年校长新年寄语
2015/08/17 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
怎么用Python识别手势数字
2021/06/07 Python
python异常中else的实例用法
2021/06/15 Python