Estou montando uma paginação e estou com o seguinte problema.
Primeiramente os meus botões próximo e anterior não estão funcionando e não mostra nenhum erro no console.
A segunda questão é que, quando eu seleciono no combo box, o valor de itens por página ele traz os itens do valor selecionado no combo mas o estranho é que ele altera o label que mostraria a página Página 3 de 1 Página 4 de 1 e assim sucessivamente.
ALguém pode me ajudar ?
meu html
<div >
<div class=" jPager">
<div class="input-group col-lg-3 col-md-3 col-sm-3 col-xs-12 pull-left">
<select onchange="carregarDistritos()" id="idSelecionaSize" class="form-control" data-pager-action='pagesize'>
<option value="5">Ver 5</option>
<option value="15">Ver 15</option>
<option value="20">Ver 20</option>
<option value="25">Ver 25</option>
<option value="50">Ver 50</option>
<option value="100">Ver 100</option>
</select>
</div>
<div class="input-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<button class="btn btn-default id="anterior" >‹ Anterior</button>
<span id="numeracao"></span>
<button class="btn btn-default id="proximo" >Próximo ›</button>
</div>
</div>
</div>
A resposta do meu get vindo da API é a seguinte:
meu JS
app.controller("buscaDistritoController", function($scope, $http, $location) {
$scope.distritos = [];
$scope.distrito = {}; // binding com o form
carregarDistritos = function() {
token = localStorage.getItem("userToken");
var e = document.getElementById("idSelecionaSize");
var size = e.options[e.selectedIndex].value;
var page=0;
var search = $location.search();
var page = search.page||page;
var size = search.size||size;
var sort = search.sort||'type,desc';
$http({
method: 'GET',
url: '/user/distritosPaginacao?page=' + page + '&size=' + size + '&sort=' + sort
}).then(function(response) {
$scope.distritos = response.data.content;
$scope.number= response.data.number;
$scope.page = response.data.totalPages;
$scope.sort = sort;
paginar = function() {
$('table > tbody > tr').remove();
var tbody = $('table > tbody');
for (var i = $scope.page * size; i < $scope.distritos.length && i < ($scope.page + 1) * size; i++) {
tbody.append(
$('<tr>')
.append($('<td>').append(dados[i][0]))
.append($('<td>').append(dados[i][1]))
)
}
$('#numeracao').text('Página ' + ($scope.page + 1) + ' de ' + Math.ceil($scope.distritos.length / size));
}
ajustarBotoes = function() {
$('#proximo').prop('disabled', $scope.distritos.length <= size || $scope.page >= Math.ceil($scope.distritos.length / size) - 1);
$('#anterior').prop('disabled', $scope.distritos.length <= size || $scope.page == 0);
}
$(function() {
$('#proximo').click(function() {
if (size < $scope.distritos.length / size - 1) {
$scope.page++;
paginar();
ajustarBotoes();
}
});
$('#anterior').click(function() {
if ($scope.page > 0) {
$scope.page--;
paginar();
ajustarBotoes();
}
});
paginar();
ajustarBotoes();
});
}, function(response) {
console.log(response.data);
console.log(response.status);
});
};
});