0

Como se faz paginação com angular e php?

Meu php:

<?php
include_once("conPDO.php");
$pdo = conectar();

$buscaCidades=$pdo->prepare("SELECT * FROM cidade");
$buscaCidades->execute();

$return = array();

while ($linha=$buscaCidades->fetch(PDO::FETCH_ASSOC)) {
    $return[] = array(
        'idCidade'  => $linha['idCidade'],
        'nome'  => utf8_encode($linha['nome']),
    );
}

echo json_encode($return);
?>

Meu html:

<div align="center">
<table width="400">
    <tr>
        <td width="200"><b>Cidade</b></td>
        <td width="100"><b>Sala</b></td>
        <td width="100"></td>
    </tr>
    <tr ng-repeat="cidade in cidades">
        <td>{{cidade.nome}}</td>
        <td>{{cidade.sala}}</td>
    </tr>
</table>

Meu controller:

app.controller("CidadesController", function ($scope, $http, $stateParams, $state) {

var carregaCidades = function () {
    $http.get("admin/php/pegaCidades.php").success(function (data){
        //console.log(data);
        $scope.cidades = data;
    });
};

carregaCidades();

});

2 Respostas 2

2

Sugiro que utilize uma das varias diretivas existentes no mercado.

Eu particularmente achei essa exceptional!

Pagine quase tudo em AngularJS !

Como usar:

<ul>
    <li dir-paginate="item in items | itemsPerPage: 10"></li>
</ul>

// Em algoum outro lugar na pagina ....

<dir-pagination-controls></dir-pagination-controls>
1
  • +1, desconhecia essa maneira. Estava fazendo tudo na mão :l Commented 15/01/2016 às 16:44
0

Aqui explico como fazer: https://guerrati.wordpress.com/2016/06/08/angularjs-paginacao-no-ng-repeat/

Basicamente é assim:

Utiliza o dirPaginate. Você precisa baixálo aqui, depois iniciá-lo na sua página:

<script src="dirPagination.js"></script>

E colocá-lo como dependência do seu módulo principal:

var app = angular.module('guerraTI', ['angularUtils.directives.dirPagination']);

Agora para ativar a paginação, basta substituir o ng-repeat pela diretiva dir-paginate. O único parâmetro que precisa ser adicionado é o itemsPerPage, que como o próprio nome já diz, é a quantidade de registros que serão mostrados em cada página.

<tr dir-paginate="dado in dados|filter:procurar|orderBy:sortKey:reverse|itemsPerPage:5">

Após isso, pode colocar os controles da paginação:

<dir-pagination-controls max-size="5" boundary-links="true"></dir-pagination-controls>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .