1
I’m trying to create a directive that uses ngTable
to paginate my tables, however, I was not successful.
Abstract the angular code that is used to make the pagination, playing it within a directive, so you don’t have to replicate this code on the other screens.
The question is, what is missing for the directive to work properly?
It follows below as it was the code:
Directive
angular.module('directiveApp', ['ngTable']).directive('pagination', ['ngTableParams', function(ngTableParams) {
return {
templateUrl:'/table.html',
restrict: 'A',
replace: true,
transclude: true,
scope: {
list: '=' \\objeto JSON
},
controller: function($scope) {
var data = [];
for (var element in $scope.list) {
data.push($scope.list[element]);
}
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}
};
}]);
table.html - used in the directive
<table data-ng-table="tableParams" class="table" data-ng-transclude></table>
Controller
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.listaPessoas = [{id: 1, nome:'Pessoa 1'},
{id: 2, nome:'Pessoa 2'},
{id: 3, nome:'Pessoa 3'},
{id: 4, nome:'Pessoa 4'},
{id: 5, nome:'Pessoa 5'},
{id: 6, nome:'Pessoa 6'},
{id: 7, nome:'Pessoa 7'},
{id: 8, nome:'Pessoa 8'},
{id: 9, nome:'Pessoa 9'},
{id: 10, nome:'Pessoa 10'},
{id: 11, nome:'Pessoa 11'}]; }]);
html screen - test screen
<table pagination list="listaPessoas">
<tr data-ng-repeat="pessoa in $data">
<td data-title="'Nome'" ng-bind="pessoa.nome"></td>
</tr>
</table>
Which error was found?
– Vinícius Gobbo A. de Oliveira
Vínicius, the problem that occurs is that the object '$data' is not filled. It is empty. The second problem is that there is no paging (even if there is no element it should show the buttons to choose how many records appear per page). The object 'tableParams' is Undefined
– user24468
https://answall.com/questions/16737/pagina%C3%A7%C3%A3o-por-demanda-com-angular-ou-javascript/63877#63877
– Luiz Antônio Cardoso Costa