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
rush:
sql;">
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页面代码:
rush:
sql;">
|
|
|
|
|
|
|
|
|
|
Box"
data-ng-model="item.$checked" data-ng-changed="checkedChange(item.id,item.$checked)"/>
%
删除
分页是通过 uib-pagination 标签来实现的,用到标签属性有:
total-items:表示总共有多少条记录
items-per-page:每一页显示多少条记录
max-size:决定用户看到的页数,即选择页面的按钮,不理解的同学可以调整这个数值查看变化
ng-model:当前所在页面
以上4个属性的值与js双向绑定
boundary-link:显示“首页”、“末页”按钮
force-ellipses:当值为true时,超过max-size的也会以省略号的形式展现
js代码如下:
rush:js;">
var app = angular.module("APP",['ui.bootstrap','ngAnimate']);
app.controller('QuestionCtrl',function($s
cope,$uibModal,$http) {
cope.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',params : {
'currentPage' : $scope.currentPage - 1,'numPerPage' : $scope.numPerPage
}
}).success(function(response) {
$scope.TotalItems = response.totalElements;
$scope.items = response.content;
});
}
$s
cope.checkAll = function(checked) {
angular.forEach($s
cope.items,function(item) {
item.$checked = checked;
});
};
$s
cope.deleteExam = function(id) {
$http({
url : '/deleteexam',p
arams : {
'id' : id,'currentPage' : $s
cope.currentPage - 1,'numPerPage' : $s
cope.numPerPage
}
}).success(function(response) {
$s
cope.TotalItems = response.totalElements;
$s
cope.items = response.content;
});
}
$s
cope.deleteItems = function() {
var checkedlist = new Array();
angular.forEach($s
cope.items,function(item) {
if (item.$checked == true)
checkedlist.push(item.id);
});
$http({
url : "/deleteexams",method : "post",p
arams : {
'ids' : checkedlist,'numPerPage' : $s
cope.numPerPage
}
}).success(function(response) {
$s
cope.TotalItems = response.totalElements;
$s
cope.items = response.content;
});
};
});
每次请求后台需要将当前页以及每页的数量发送到后台。
前台接受到的json数据是这样的
rush:js;">
{"content":[{"id":225,"test":"办公
自动化是计算机的一项应用,按计算机应用
分类,它属于____。","op1":"数据处理","op2":"科学计算","op3":"实时控制","op4":"辅助设计","answer":"A","total":2,"totalCorrect":1},{"id":224,"test":"软件由___和文档两部分组成。","op1":"数据","op2":"指令","op3":"程序","op4":"工具","answer":"C",{"id":223,"test":"为达到某一目的而编写的计算机指令序列称为____。","op1":"软件","op2":"字符串","op4":"命令",{"id":222,{"id":220,{"id":219,{"id":218,{"id":217,{"id":216,{"id":215,"totalCorrect":1}],"last":false,"totalPages":9,"totalElements":86,"number":0,"size":10,"sort":[{"direction":"DESC","property":"id","ig
noreCase":false,"nullHandling":"NATIVE","ascending":false}],"numberOfElements":10,"f
irst":true}
后台controller代码
rush:js;">
@RequestMapping(value = "/getExamsByPage")
@ResponseBody
public Page
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 Exams = examrepository.findAll(pageable);
return Exams;
}
repository代码:
rush:js;">
@Transactional
public interface ExamRepository extends JpaRepository {
}
contoller中调用的findAll方法是PagingAndSortingRepository实现的,但是JpaRepository继承自PagingAndSortingRepository,因此也有findAll方法,不明白的同学可以去查阅改接口的资料。
这样就完成了分页显示,图片如下
总结
以上所述是小编给大家介绍的Angular+Bootstrap+Spring Boot实现分页功能实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。