%
分页是通过 uib-pagination 标签来实现的，用到标签属性有：
total-items:表示总共有多少条记录
items-per-page:每一页显示多少条记录
max-size:决定用户看到的页数，即选择页面的按钮，不理解的同学可以调整这个数值查看变化
ng-model:当前所在页面
以上4个属性的值与js双向绑定
boundary-link:显示“首页”、“末页”按钮
force-ellipses:当值为true时，超过max-size的也会以省略号的形式展现
js代码如下：
$scope.checkAll = function(checked) {
angular.forEach($scope.items,function(item) {
item.$checked = checked;
});
};
$scope.deleteExam = function(id) {
$http({
url : '/deleteexam',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,'numPerPage' : $scope.numPerPage
}
}).success(function(response) {
$scope.TotalItems = response.totalElements;
$scope.items = response.content;
});
};
});
每次请求后台需要将当前页以及每页的数量发送到后台。
前台接受到的json数据是这样的
后台controller代码
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代码：
{
}
contoller中调用的findAll方法是PagingAndSortingRepository实现的，但是JpaRepository继承自PagingAndSortingRepository，因此也有findAll方法，不明白的同学可以去查阅改接口的资料。
这样就完成了分页显示，图片如下
总结
以上所述是小编给大家介绍的Angular+Bootstrap+Spring Boot实现分页功能实例代码。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
