angularjs - data - ng-table-dynamic

ngTableParams Paginación con $ http.get

Question

Trabajando en un proyecto AngularJS y me encontré con el siguiente problema:

Cuando se utilizan datos codificados localmente / guardados localmente, la paginación funciona bien. Al usar datos almacenados remotamente, la paginación no funciona correctamente.

He buscado bastante, pero no pude encontrar la solución a mi problema, así que aquí están los snippits de código:

El HTML:

<div ng-controller="ngTableCtrl">
    <p><strong>Pagina:</strong> {{tableParams.page()}}</p>
    <p><strong>Aantal weergegeven:</strong> {{tableParams.count()}}</p>

    <table ng-table="tableParams" class="table table-striped" template-pagination="custom/pager">
        <tr ng-repeat="x in names">
            <td data-title="''Name''">{{x.Name}}</td>
            <td data-title="''City''">{{x.City}}</td>
            <td data-title="''Country''">{{x.Country}}</td>
        </tr>
    </table>

    <script type="text/ng-template" id="custom/pager">
        <ul class="pager ng-cloak">
            <li ng-repeat="page in pages"
                ng-class="{''disabled'': !page.active, ''previous'': page.type == ''prev'', ''next'': page.type == ''next''}"
                ng-show="page.type == ''prev'' || page.type == ''next''" ng-switch="page.type">
                <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>
                <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>
            </li>
            <li>
                <div class="btn-group">
                    <button type="button" ng-class="{''active'':params.count() == 2}" ng-click="params.count(2)" class="btn btn-default">2</button>
                    <button type="button" ng-class="{''active'':params.count() == 5}" ng-click="params.count(5)" class="btn btn-default">5</button>
                    <button type="button" ng-class="{''active'':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>
                    <button type="button" ng-class="{''active'':params.count() == 15}" ng-click="params.count(15)" class="btn btn-default">15</button>
                </div>
            </li>
        </ul>
    </script>
</div>

El JS:

app.controller(''ngTableCtrl2'', function ($scope, $http, $filter, ngTableParams) {

    $http.get(''http://www.w3schools.com/angular/customers.php'')
    .success(function (response) {$scope.names = response.records;});

    $scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 5, // count per page
        sorting: {
            name: ''asc'' // initial sorting
        }
    }, {
        total: data.length, // length of data
        getData: function ($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ? $filter(''orderBy'')(data, params.orderBy()) : data;
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
});

La página web (versión en vivo: http://178.62.232.175:8080/STANDARD/#/app/table/data ) muestra todos los resultados en la primera tabla (remota, desde $ http.get), mientras que la segunda tabla, muestra solo los resultados establecidos ?! (2, 5, 10, 15) El código es idéntico, excepto por:

<tr ng-repeat="x in names">

utilizado para mostrar datos remotos y se reemplaza por:

<tr ng-repeat="x in $data">

para mostrar los datos sin procesar como tales:

var data = [{
Name: "Alfreds Futterkiste", City: "Berlin", Country: "Germany"},{
Name: "Ana Trujillo Emparedados", City: "México D.F.", Country: "Mexico"},{
Name: "Antonio Moreno Taquería", City: "México D.F.", Country: "Mexico"},{
Name: "Around the Horn", City: "London", Country: "UK"},{
Name: "B''s Beverages", City: "London", Country: "UK"},{
Name: "Berglunds snabbköp", City: "Luleå", Country: "Sweden"},{
Name: "Blauer See Delikatessen", City: "Mannheim", Country: "Germany"},{
Name: "Blondel père et fils", City: "Strasbourg", Country: "France"},{
Name: "Bólido Comidas preparadas", City: "Madrid", Country: "Spain"},{
Name: "Bon app", City: "Marseille", Country: "France"},{
Name: "Bottom-Dollar Marketse", City: "Tsawassen", Country: "Canada"},{
Name: "Cactus Comidas para llevar", City: "Buenos Aires", Country: "Argentina"}
];

La paginación de la segunda tabla funciona como debería. ¿Qué debo editar para que funcione con datos remotos?

Answer 1

En primer lugar, su código está utilizando la matriz de datos local como fuente en la devolución de llamada ngTables getData y no está claro lo que está presentando como una comparación ya que en realidad no intentó cargar datos AJAX a partir de los ejemplos oficiales.

En su lugar, esperaría que tuviera una llamada de API al servidor usando $ http.get.

Recuerde que para que la paginación del lado del servidor funcione, debe actualizar el recuento total cada vez que consulta datos porque pueden haber cambiado. También tendrá que considerar una solución del lado del servidor para la clasificación también.

Aquí hay una muestra de trabajo que usa github api como servicio de prueba.

var app = angular.module(''main'', [''ngTable'']);

app.controller(''MainCtrl'', function($scope, $http, ngTableParams) {
  $scope.tableParams = new ngTableParams({
                page: 1,
                count: 5,
            }, {
                getData: function ($defer, params) {
                    var page = params.page();
                    var size = params.count();
                    var testUrl = ''https://api.github.com/search/repositories'';
                    var search = {
                      q: ''angular'',
                      page: page,
                      per_page: size
                    }
                    $http.get(testUrl, { params: search, headers: { ''Content-Type'': ''application/json''} })
                         .then(function(res) {
                            params.total(res.data.total_count);
                            $defer.resolve(res.data.items);
                        }, function(reason) {
                            $defer.reject();
                        }
                    );
                },
            });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<div  ng-app="main"  ng-controller="MainCtrl">
   <table ng-table="tableParams" class="table table-striped table-bordered table-hover table-condensed">
        <tr ng-repeat="repo in $data">
            <td data-title="''id''">{{repo.id}}</td>
            <td data-title="''name''">{{repo.name}}</td>
            <td data-title="''owner''">{{repo.owner.login}}</td>
        </tr>
</table> 
<div>