I need to make a pagination using AngularJS . Well, I made a controller to popular Table HTML . This is working now. My next step will be to page this table. I took an example on the internet, but the example the guy makes a for 1 to 1000 and leaves paging. In my case it is different, I get a JSON of my REST and I need to page this, separate in block of 10, as I get 40 serialized records, it would give 4 pages out of 10. I made a controller.js only for that, is right, to separate well. Each case a case. Below my controller:
var pagina = angular.module('app', []);
pagina.controller("PaginacaoController", function ($scope) {
$scope.filteredTodos = []
, $scope.currentPage = 1
, $scope.numPerPage = 10
, $scope.maxSize = 5;
$scope.makePagina = function () {
$scope.pagina = [];
for (i = 1; i <= 1000; i++) {
$scope.pagina.push({ text: "Teste " + i, done: false });
}
};
$scope.makePagina();
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredPagina = $scope.pagina.slice(begin, end);
});
})
I have two doubts there:
1) In the second function (), that of for , I think I should put a date and get the date.items (this way I get the JSON to populate the table) but data.items.length , not funfa, with me gave error.
2) See that $scope.numPerPage is set to 10, but in this case I do not know how many records come and the paging should be dynamic.
Below my view, which today works for the popular table:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Tipo Contato Operadora</h2>
<div data-ng-controller="TipoContatoOperadoraController">
<div class="panel panel-default">
<div class="panel-heading">Lista de Tipo de Contato das Operadoras</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<strong>{{erro}}</strong>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<tr>
<th>Cod. Tipo Contato</th>
<th>Nome Tipo Contato</th>
<th>Ind. Tipo Contato</th>
<th>Data Atualização</th>
<th>Cod. Usuário</th>
</tr>
<tr data-ng-repeat="lista in listaTipoContatoOperadora">
<td>{{ lista.id }}</td>
<td>{{ lista.nome }}</td>
<td>{{ lista.tipoContato }}</td>
<td>{{ lista.dataUltimaAtualizacao }}</td>
<td>{{ lista.loginUltimaAtualizacao }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
EDITION 1
If I put two controllers, my view gets lost. The current Controller to receive JSON is this:
var app = angular.module('app', []);
app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])
function TipoContatoOperadoraController($scope, $http) {
$http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
.success(function (data) {
$scope.listaTipoContatoOperadora = data.items;
})
.error(function () {
//$scope.dt = 'Teste: ' + $scope.data;
$scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
});
}
How can I do this pagination controller? It's bone.
EDITION 2
So it was my controller and still not page:
var app = angular.module('app', []);
app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])
function TipoContatoOperadoraController($scope, $http) {
$scope.filteredTodos = []
, $scope.currentPage = 1
, $scope.numPerPage = 10
, $scope.maxSize = 5;
$http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
.success(function (data) {
$scope.listaTipoContatoOperadora = data.items;
$scope.makePagina = function (data) {
$scope.pagina = [];
for (i = 1; i <= data.items.lehgth; i++) {
$scope.msg = "Teste " + i;
$scope.pagina.push({ text: "Teste " + i, done: false });
}
};
$scope.makePagina();
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredPagina = $scope.pagina.slice(begin, end);
});
})
.error(function () {
//$scope.dt = 'Teste: ' + $scope.data;
$scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
});
}
EDITION 3
I made this change and it worked. What was missing was the AngularJS-UI and CSS or Bootstrap, set up page navigation, but that worked.
$http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
.success(function (data) {
$scope.filteredTodos = []
, $scope.currentPage = 1
, $scope.maxSize = 5
, $scope.numPerPage = data.items.length / $scope.maxSize;
$scope.listaTipoContatoOperadora = data.items;
var t = data.items.length;
console.log(t);
$scope.makePagina = function () {
$scope.pagina = [];
for (i = 1; i <= data.items.length; i++) {
$scope.pagina.push({ text: "Página " + i, done: false });
}
};
$scope.makePagina();
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredPagina = $scope.pagina.slice(begin, end);
});
})
.error(function () {
//$scope.dt = 'Teste: ' + $scope.data;
$scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
});
EDITION 4
I was able to do the slice with this code. I just can not bring the navigation buttons between the pages:
var app = angular.module('app', []);
app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])
function TipoContatoOperadoraController($scope, $http) {
$http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
.success(function (data) {
$scope.filteredPagina = []
, $scope.currentPage = 1
, $scope.maxSize = 5
, $scope.numPerPage = data.items.length / $scope.maxSize;
$scope.listaTipoContatoOperadora = data.items;
$scope.makePagina = function () {
$scope.app = [];
for (i = 1; i <= data.items.length; i++) {
$scope.app.push({ text: "Página " + i, done: false });
}
};
$scope.makePagina();
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredPagina = $scope.listaTipoContatoOperadora.slice(begin, end);
});
})
.error(function () {
//$scope.dt = 'Teste: ' + $scope.data;
$scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
});
}
And my view (just the TD's) looks like this:
<tr data-ng-repeat="lista in filteredPagina">
<td>{{ lista.id }}</td>
<td>{{ lista.nome }}</td>
<td>{{ lista.tipoContato }}</td>
<td>{{ lista.dataUltimaAtualizacao }}</td>
<td>{{ lista.loginUltimaAtualizacao }}</td>
</tr>
I just changed the foreach to the filtered page (s)