摘要:angular with pagination with Spring Data Jpa
CRUD using Spring MVC 4.0 RESTful Web Services and AngularJS
respository and service example
Reposotory extens Jparepository<Item , integer>:
Lit<Item> findByBlog(Blog blog, Pageable pageable);
Servive:
Lit<Item> items = itemRepo.findByBlog(blog, new PageRequest(0 , size , Direction.ASC , properties);
angular with pagination with Spring Data Jpa:
@RequestMapping("/widgets")
@RestController
public class WidgetController {
@Inject
private WidgetRepository widgetRepository;
@Inject
private WidgetResourceAssembler widgetResourceAssembler;
@RequestMapping(method = RequestMethod.GET, produces = {"application/json"})
public PagedResources<Widget> widgets(Pageable pageable, PagedResourcesAssembler assembler) {
Page<Widget> widgets = widgetRepository.findByType("furry", pageable);
return assembler.toResource(widgets, widgetResourceAssembler);
}
}
=================Angular JS
angular.module('widgetApp')
.controller('WidgetCtrl', function ($scope, $http, $location) {
var search = $location.search();
var page = search.page||0;
var size = search.size||20;
var sort = search.sort||'type,desc';
$http({method: 'GET', url: '/app/widgets?page=' + page + '&size=' + size + '&sort=' + sort})
.success(function(data) {
============HTML
<ul class="pagination">
<li ng-class="{disabled: page.number === 0}">
<a ng-show="page.number !== 0" ng-href="#{{basePath}}?page=0&size={{page.size}}&sort={{sort}}">«</a>
<span ng-show="page.number === 0">«</span>
</li>
<li ng-class="{disabled: page.number === 0}">
<a ng-show="page.number !== 0" ng-href="#{{basePath}}?page={{page.number - 1}}&size={{page.size}}&sort={{sort}}">Prev</a>
<span ng-show="page.number === 0">Prev</span>
</li>
<li ng-repeat="n in [] | pages: page.number:page.totalPages:5" ng-class="{active: n === page.number}">
<a ng-show="page.number !== n" ng-href="#{{basePath}}?page={{n}}&size={{page.size}}&sort={{sort}}">{{n + 1}}</a>
<span ng-show="page.number === n">{{n + 1}}</span>
</li>
<li ng-class="{disabled: page.number === page.totalPages - 1}">
<a ng-show="page.number !== page.totalPages - 1" ng-href="#{{basePath}}?page={{page.number + 1}}&size={{page.size}}&sort={{sort}}">Next</a>
<span ng-show="page.number === page.totalPages - 1">Next</span>
</li>
<li ng-class="{disabled: page.number === page.totalPages - 1}">
<a ng-show="page.number !== page.totalPages - 1" ng-href="#{{basePath}}?page={{page.totalPages - 1}}&size={{page.size}}&sort={{sort}}">»</a>
<span ng-show="page.number === page.totalPages - 1">»</span>
</li>
</ul>