小程序有哪些用_Angular+Bootstrap+Spring Boot完成分页

日期:2021-01-11 类型:行业动态 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

Angular+Bootstrap+Spring Boot实现分页功能实例代码       这篇文章主要介绍了Angular+Bootstrap+Spring Boot实现分页功能实例代码,需要的朋友可以参考下

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" 
 table 
 thead 
 th input type="checkbox" 
 data-ng-model="allChecked" data-ng-change="checkAll(allChecked)" / /th 
 th 序号 /th 
 th 题目 /th 
 th A /th 
 th B /th 
 th C /th 
 th D /th 
 th 答案 /th 
 th 答题数 /th 
 th 正确数 /th 
 th 正确率 /th 
 /tr 
 /thead 
 tbody 
 tr data-ng-repeat="item in items" 
 td input type="checkbox" 
 data-ng-model="item.$checked" data-ng-changed="checkedChange(item.id,item.$checked)"/ /td 
 td span data-ng-bind="$index+1" /span /td 
 data-ng-bind="item.test" /td 
 td data-ng-bind="item.op1" /td 
 td data-ng-bind="item.op2" /td 
 td data-ng-bind="item.op3" /td 
 td data-ng-bind="item.op4" /td 
 td data-ng-bind="item.answer" /td 
 td data-ng-bind="item.total" /td 
 td data-ng-bind="item.totalCorrect" /td 
 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 
 button data-ng-click="deleteItems()" 删除 /button 
 span uib-pagination total-items="TotalItems" ng-model="currentPage" items-per-page = "numPerPage" max-size="maxSize" first-text="首页" previous-text="上一页" next-text="下一页" last-text="末页" boundary-links="true" ng-change="pageChanged()" force-elli凡科抠图es="false" /uib-pagination /span 
 /div 
 /div 

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

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

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

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

ng-model:当前所在页面

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

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

force-elli凡科抠图es:当值为true时,超过max-size的也会以省略号的形式展现

js代码如下:

var app = angular.module("APP",['ui.bootstrap', 'ngAnimate']); 
app.controller('QuestionCtrl', function($scope, $uibModal, $http) { 
 span $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实现分页功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!