How to do pagination with AngularJS and php?

0

How do you do pagination with angular and php?

My 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);
?>

My 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>

My 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();

});
    
asked by anonymous 14.01.2016 / 20:59

2 answers

2

I suggest that you use one of the various policies on the market.

I particularly found this exceptional!

Page almost everything in AngularJS!

How to use:

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

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

<dir-pagination-controls></dir-pagination-controls>
    
14.01.2016 / 22:18
0

Here's how to do it: link

It's basically like this:

Use dirPaginate . You need to download it here , then start it on your page:

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

And put it as a dependency on your main module:

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

Now to turn paging on, simply replace ng-repeat with the dir-paginate directive. The only parameter that needs to be added is itemsPerPage, which as the name itself says, is the amount of records that will be shown on each page.

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

After this, you can place the paging controls:

<dir-pagination-controls max-size="5" boundary-links="true"></dir-pagination-controls>
    
14.06.2016 / 14:36