Ng-table: la paginación no funciona con datos personalizados del archivo json

Creado en 2 ago. 2016 · 10Comentarios · Fuente: esvit/ng-table

Estoy usando datos personalizados del archivo .json y quiero paginar los datos, pero todos los datos vienen en una sola página; ¿porque? abajo esta mi codigo

 $http.get('app/user_keys.json').success(function(data) {
            vm.data = data;
            vm.tableParams = new NgTableParams({ page: 1, count: 2 }, {
                    total: vm.data.length,
                    getData: function (params) {
                        console.log(vm.data.length);
                        var deferred = $q.defer();
                        var orderedData = params.sorting() ? $filter('orderBy')(vm.data, params.orderBy()) : vm.data;
                        deferred.resolve(orderedData.slice((params.page() - 1) * params.count(),  params.page() * params.count()));
                    }
                });
        });

<table ng-table="vm.tableParams" class="table table-striped" >
                    <colgroup>
                          <col width="5%"/>
                          <col width="30%"/>
                          <col width="50%"/>
                          <col width="15%"/>
                    </colgroup>
                    <tr ng-repeat="row in vm.data | filter: searchText  track by $index">
                        <td header="'headerCheckbox.html'">
                        <input type="checkbox" value="row._id" ng-model="vm.checkboxes.items[row._id]" ></td>
                        <td data-title="'ID'">{{ row.index }}</td>
                        <td data-title="'Cloud Location'">{{ row.location }}</td>
                        <td data-title="'Action'"><i class="fa fa-trash"></i></td>
                    </tr>
                </table>

Fuente

zymr-keshav

👍3

Comentario más útil

Ok, lo arreglé, es porque dataOptions puede ser undefined . Entonces el código debería ser

 if (settings.dataOptions && !settings.dataOptions.applyPaging) {
   return ngTableDefaultGetData(result, params);
 }

miparnisari en 21 dic. 2016

👍4

Todos 10 comentarios

¿Está seguro de que está relacionado con el hecho de que su fuente es un archivo JSON?
Creo que tengo el mismo problema, aunque mi fuente de datos es un servicio.

Ese servicio devuelve una promesa y cuando se resuelve configuro params.total() , como se describe en la documentación antes de devolver el resultado, pero la paginación aún no funciona.

batjko en 11 ago. 2016

Tengo el mismo problema, al paginar datos de grupo. Entonces, agrego estas líneas al final en la función getGroups .

if (!settings.dataOptions.applyPaging) {
    return ngTableDefaultGetData(result, params);
}
return ngTableDefaultGetData.applyPaging(result, params);

La paginación funciona en uso predeterminado o personalizado.

fsm3xpert en 11 ago. 2016

👍1

Sí, esta es casi la misma solución que mencioné en el #872. No estoy seguro de si la verificación de settings.dataOptions.applyPaging es importante, ya que se configura manualmente como falsa algunas líneas arriba.

tandibar en 12 ago. 2016

@fsm3xpert , @tandibar , apliqué la solución propuesta por @fsm3xpert y funciona, pero obtengo lo siguiente en mi consola:

Possibly unhandled rejection: {}

¿Algunas ideas?

miparnisari en 19 dic. 2016

Ok, lo arreglé, es porque dataOptions puede ser undefined . Entonces el código debería ser

 if (settings.dataOptions && !settings.dataOptions.applyPaging) {
   return ngTableDefaultGetData(result, params);
 }

miparnisari en 21 dic. 2016

👍4

Por cierto, una versión futura de ng-table significará que los valores de configuración anidados (EG
dataOptions) nunca será indefinido

El miércoles 21 de diciembre de 2016 a las 19:19, María Inés Parnisari <
[email protected]> escribió:

Ok, lo arreglé, es porque las opciones de datos pueden no estar definidas. Entonces el código
debiera ser
if (configuraciones.opciones de datos && !configuraciones.opciones de datos.applyPaging) {
devuelve ngTableDefaultGetData (resultado, parámetros);
}
—
Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/esvit/ng-table/issues/893#issuecomment-268614815 , o silenciar
la amenaza
https://github.com/notifications/unsubscribe-auth/AA2HPk4I47xMpIlEbXSDSCMUu0mlGn7Vks5rKXu4gaJpZM4Jagxg
.

christianacca en 22 dic. 2016

en caso de que alguien tenga el mismo problema que yo, que es que cambiar el código de la biblioteca no es una opción por el motivo que sea, encontré una solución alternativa:

El problema parece ser que la agrupación simplemente no está implementada para tratar con datos paginados. Lo que terminé haciendo es recuperar mis datos para la página deseada y almacenar en caché el número total de elementos en una variable.
actualTotal = params.total()
Luego implementé un interceptor de respuesta como se describe en http://ng-table.com/#/global -customization/demo-response-interceptors. Allí puedo volver a establecer el valor total en el valor almacenado en caché. Esto corrige la visualización de la paginación.

Queda un problema pendiente, que es que si el usuario intenta ir a otra página que no sea la 1, no verá nada ya que la agrupación divide la matriz de datos con este código:
var pagedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
Una solución simple para esto también es configurar la página en 1 en la función getData una vez que haya recuperado los datos, almacenar en caché la página real y restablecerla en el interceptor.

enpo en 3 ene. 2017

Después de aplicar la solución sugerida, el filtrado dejó de funcionar para mí. Para solucionarlo, en las líneas anteriores, tuve que configurar dataOptions así:

settings.dataOptions = { applyPaging: false, applyFilter: false };

nmoinvaz en 7 oct. 2017

¿Esta solución está disponible en la última versión? si no, en qué línea debe agregarse.

r-arun-r en 6 mar. 2018

No está disponible en la última versión.
Lo tengo funcionando modificando esta sección de código:
if (sortDirection) {
var orderByFn = ngTableDefaultGetData.getOrderByFn();
var orderBy = util_1.convertSortToOrderBy({
value: sortDirection
});
result = orderByFn(result, orderBy);
}
return ngTableDefaultGetData.applyPaging(result, params);

con este:
if (sortDirection) {
var orderByFn = ngTableDefaultGetData.getOrderByFn();
var orderBy = util_1.convertSortToOrderBy({
value: sortDirection
});
result = orderByFn(result, orderBy);
}
if (sortDirection) { var orderByFn = ngTableDefaultGetData.getOrderByFn(); var orderBy = util_1.convertSortToOrderBy({ value: sortDirection }); resultado = orderByFn(resultado, orderBy); } if (!settings.dataOptions.applyPaging) { return ngTableDefaultGetData(resultado, params); } devuelve ngTableDefaultGetData.applyPaging(resultado, parámetros);`