Ng-table: la pagination ne fonctionne pas avec les données personnalisées du fichier json

Créé le 2 août 2016 · 10Commentaires · Source: esvit/ng-table

J'utilise des données personnalisées à partir d'un fichier .json et je souhaite paginer les données, mais toutes les données sont fournies sur une seule page ; pourquoi donc? ci-dessous mon code

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

Source

zymr-keshav

👍3

Commentaire le plus utile

Ok j'ai corrigé, c'est parce que dataOptions peut être undefined . Donc le code devrait être

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

miparnisari le 21 déc. 2016

👍4

Tous les 10 commentaires

Êtes-vous sûr que cela est lié au fait que votre source est un fichier JSON ?
J'ai le même problème, je pense, bien que ma source de données soit un service.

Ce service renvoie une promesse et lorsqu'il est résolu, j'ai défini params.total() , comme décrit dans la documentation avant de renvoyer le résultat, mais la pagination ne fonctionnera toujours pas.

batjko le 11 août 2016

J'ai le même problème, lors de la pagination sur les données de groupe. Donc, j'ajoute ces lignes à la fin de la fonction getGroups .

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

La pagination fonctionnant soit par défaut soit par défaut.

fsm3xpert le 11 août 2016

👍1

Oui, c'est presque la même solution que j'ai mentionnée dans #872. Je ne sais pas si la vérification settings.dataOptions.applyPaging est importante car elle est définie manuellement sur false certaines lignes ci-dessus.

tandibar le 12 août 2016

@fsm3xpert , @tandibar , j'ai appliqué la solution proposée par @fsm3xpert et ça marche, mais j'obtiens ceci dans ma console :

Possibly unhandled rejection: {}

Des idées?

miparnisari le 19 déc. 2016

Ok j'ai corrigé, c'est parce que dataOptions peut être undefined . Donc le code devrait être

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

miparnisari le 21 déc. 2016

👍4

BTW, une future version de ng-table signifiera que les valeurs de réglage imbriquées (par exemple
dataOptions) ne sera jamais indéfini

Le mer. 21 déc. 2016 à 19 h 19, María Inés Parnisari <
[email protected]> a écrit :

Ok je l'ai corrigé, c'est parce que dataOptions peut être indéfini. Alors le code
devrait être
si (settings.dataOptions && !settings.dataOptions.applyPaging) {
return ngTableDefaultGetData(result, params);
}
—
Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/esvit/ng-table/issues/893#issuecomment-268614815 , ou muet
le fil
https://github.com/notifications/unsubscribe-auth/AA2HPk4I47xMpIlEbXSDSCMUu0mlGn7Vks5rKXu4gaJpZM4Jagxg
.

christianacca le 22 déc. 2016

au cas où quelqu'un aurait le même problème que moi, c'est-à-dire que changer le code de la bibliothèque n'est pas une option pour une raison quelconque, j'ai trouvé une solution de contournement :

Le problème semble être que le regroupement n'est tout simplement pas mis en œuvre pour traiter les données paginées. Ce que j'ai fini par faire, c'est de récupérer mes données pour la page souhaitée et de mettre en cache le nombre total d'éléments dans une variable.
actualTotal = params.total()
J'ai ensuite implémenté un intercepteur de réponse comme décrit dans http://ng-table.com/#/global -customization/demo-response-interceptors. Là, je peux remettre la valeur totale à la valeur mise en cache. Cela corrige l'affichage de la pagination.

Il reste un problème, à savoir que si l'utilisateur essaie d'accéder à une autre page que 1, vous ne verrez rien car le regroupement découpe le tableau de données avec ce code :
var pagedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
Une solution de contournement simple consiste également à définir la page sur 1 dans la fonction getData une fois que vous avez récupéré les données, mis en cache la page réelle et réinitialisé dans l'intercepteur.

enpo le 3 janv. 2017

Après avoir appliqué le correctif suggéré, le filtrage a cessé de fonctionner pour moi. Afin de le réparer, dans les lignes ci-dessus, j'ai dû définir le dataOptions comme ceci :

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

nmoinvaz le 7 oct. 2017

ce correctif est-il disponible dans la dernière version ? sinon à quelle ligne il faut l'ajouter.

r-arun-r le 6 mars 2018

Il n'est pas disponible dans la dernière version.
Je l'ai fait fonctionner en modifiant cette section de code:
if (sortDirection) {
var orderByFn = ngTableDefaultGetData.getOrderByFn();
var orderBy = util_1.convertSortToOrderBy({
value: sortDirection
});
result = orderByFn(result, orderBy);
}
return ngTableDefaultGetData.applyPaging(result, params);

avec ça:
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 }); résultat = orderByFn(result, orderBy); } if (!settings.dataOptions.applyPaging) { return ngTableDefaultGetData(result, params); } return ngTableDefaultGetData.applyPaging(result, params);`