Skip to content

Instantly share code, notes, and snippets.

@geraldhumphries
Created January 25, 2016 00:35
Show Gist options
  • Save geraldhumphries/5e0a64a4b718760b8179 to your computer and use it in GitHub Desktop.
Save geraldhumphries/5e0a64a4b718760b8179 to your computer and use it in GitHub Desktop.
Query param pagination without resolve
<form name="searchForm" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" ng-model="searchQuery" id="searchQuery" placeholder="query">
<span class="input-group-btn">
<button class="btn btn-info" ng-click="search(searchQuery)">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<span class="input-group-btn">
<button class="btn btn-info" ng-click="clear()" ng-show="currentSearch">
<span class="glyphicon glyphicon-trash"></span>
</button>
</span>
</div>
</div>
</form>
...
<tr jh-sort="predicate" ascending="reverse" callback="transition()">
...
<uib-pagination class="pagination-sm" total-items="totalItems" ng-model="page" ng-change="transition()"></uib-pagination>
'use strict';
angular.module('testApp')
.controller('EntityController', function ($scope, $state, Entity, EntitySearch, ParseLinks, pagingParams, AlertService) {
$scope.predicate = pagingParams.predicate;
$scope.reverse = pagingParams.ascending;
$scope.searchQuery = pagingParams.search;
$scope.currentSearch = pagingParams.search;
$scope.loadAll = function() {
var onSuccess = function (data, headers) {
$scope.links = ParseLinks.parse(headers('link'));
$scope.totalItems = headers('X-Total-Count');
$scope.entitys = data;
$scope.page = pagingParams.page + 1;
};
var onError = function (error) {
AlertService.error(error.data.message);
};
if (pagingParams.search) {
EntitySearch.query({
query: pagingParams.search,
page: pagingParams.page,
size: 20,
sort: [pagingParams.predicate + ',' + (pagingParams.ascending ? 'asc' : 'desc'), 'id']
}, onSuccess, onError);
} else {
Entity.query({
page: pagingParams.page,
size: 20,
sort: [pagingParams.predicate + ',' + (pagingParams.ascending ? 'asc' : 'desc'), 'id']
}, onSuccess, onError);
}
};
$scope.loadAll();
$scope.search = function (searchQuery) {
$scope.page = 1;
$scope.predicate = 'id';
$scope.reverse = true;
$scope.currentSearch = searchQuery;
$scope.transition();
};
$scope.clear = function () {
$scope.page = 1;
$scope.predicate = 'id';
$scope.reverse = true;
$scope.currentSearch = null;
$scope.transition();
};
$scope.transition = function () {
$state.transitionTo($state.$current, {
page: $scope.page - 1,
sort: $scope.predicate + ',' + ($scope.reverse ? 'asc' : 'desc'),
search: $scope.currentSearch
});
};
});
.state('entity', {
parent: 'entity',
url: '/entitys?page&sort&search',
data: {
authorities: ['ROLE_USER'],
pageTitle: 'jedApp.entity.home.title'
},
views: {
'content@': {
templateUrl: 'scripts/app/entities/entity/entitys.html',
controller: 'EntityController'
}
},
params: {
page: {
value: '0',
squash: true
},
sort: {
value: 'id,asc',
squash: true
},
search: null
},
resolve: {
pagingParams: ['$stateParams', 'PaginationUtil', function ($stateParams, PaginationUtil) {
return {
page: PaginationUtil.parsePage($stateParams.page),
sort: $stateParams.sort,
predicate: PaginationUtil.parsePredicate($stateParams.sort),
ascending: PaginationUtil.parseAscending($stateParams.sort),
search: $stateParams.search
}
}],
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('entity');
$translatePartialLoader.addPart('global');
return $translate.refresh();
}]
}
})
'use strict';
angular.module('testApp')
.service('PaginationUtil', function () {
// util for parsing to sort and page parameter. Spring expects sort in the format "id,asc" so I've stuck that
// in the query parameters for the state. it might be better to just separate predicate and id
this.parsePredicate = function (sort) {
var sortArray = sort.split(',');
if (sortArray.length > 1){
sortArray.pop();
}
return sortArray.join(',');
};
this.parseAscending = function (sort) {
var sortArray = sort.split(',');
if (sortArray.length > 1){
return sort.split(',').slice(-1)[0] == 'asc';
} else {
// default to true if no sort defined
return true;
}
};
// query params are strings, and need to be parsed
this.parsePage = function (page) {
return parseInt(page);
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment