Ng-table: paginação não funciona com dados personalizados do arquivo json

Criado em 2 ago. 2016 · 10Comentários · Fonte: esvit/ng-table

Estou usando dados personalizados do arquivo .json e quero paginar os dados, mas todos os dados vêm em uma única página; Por quê então? abaixo estão meu código

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

Fonte

zymr-keshav

👍3

Comentários muito úteis

Ok eu consertei, é porque dataOptions pode ser undefined . Então o código deve ser

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

miparnisari em 21 dez. 2016

👍4

Todos 10 comentários

Tem certeza de que está relacionado ao fato de sua fonte ser um arquivo JSON?
Estou tendo o mesmo problema, acho, embora minha fonte de dados seja um serviço.

Esse serviço retorna uma promessa e quando resolve eu defino params.total() , conforme descrito na documentação antes de retornar o resultado, mas a paginação ainda não funcionará.

batjko em 11 ago. 2016

Eu tenho o mesmo problema, ao paginar dados do grupo. Então, eu adiciono essas linhas no final da função getGroups .

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

A paginação que funciona em padrão usado ou personalizado.

fsm3xpert em 11 ago. 2016

👍1

Sim, esta é quase a mesma solução que mencionei em # 872. Não tenho certeza se a verificação settings.dataOptions.applyPaging é importante, pois é definida manualmente como false algumas linhas acima.

tandibar em 12 ago. 2016

@fsm3xpert , @tandibar , apliquei a solução proposta por @fsm3xpert e funciona, mas recebo o seguinte no meu console:

Possibly unhandled rejection: {}

Alguma ideia?

miparnisari em 19 dez. 2016

Ok eu consertei, é porque dataOptions pode ser undefined . Então o código deve ser

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

miparnisari em 21 dez. 2016

👍4

BTW, uma versão futura do ng-table significará que os valores de configuração aninhados (EG
dataOptions) nunca será indefinido

Na quarta-feira, 21 de dezembro de 2016 às 19h19, María Inés Parnisari <
[email protected]> escreveu:

Ok eu consertei, é porque dataOptions pode estar indefinido. Então o código
deveria estar
if (settings.dataOptions && !settings.dataOptions.applyPaging) {
return ngTableDefaultGetData(resultado, params);
}
—
Você está recebendo isso porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/esvit/ng-table/issues/893#issuecomment-268614815 ou silenciar
o segmento
https://github.com/notifications/unsubscribe-auth/AA2HPk4I47xMpIlEbXSDSCMUu0mlGn7Vks5rKXu4gaJpZM4Jagxg
.

christianacca em 22 dez. 2016

caso alguém tenha o mesmo problema que eu, que é que alterar o código da biblioteca não é uma opção por qualquer motivo, encontrei uma solução alternativa:

O problema parece ser que o agrupamento simplesmente não é implementado para lidar com dados paginados. O que acabei fazendo é recuperar meus dados para a página desejada e armazenar em cache o número total de itens em uma variável.
actualTotal = params.total()
Em seguida, implementei um interceptor de resposta conforme descrito em http://ng-table.com/#/global -customization/demo-response-interceptors. Lá eu posso definir o valor total de volta para o valor em cache. Isso corrige a exibição da paginação.

Há um problema restante, que é que, se o usuário tentar ir para outra página diferente de 1, você não verá nada, pois o agrupamento divide o array de dados com este código:
var pagedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
Uma solução simples para isso também é definir a página como 1 na função getData depois de recuperar os dados, armazenar em cache a página real e redefinir no interceptor.

enpo em 3 jan. 2017

Depois de aplicar a correção sugerida, a filtragem parou de funcionar para mim. Para corrigi-lo, nas linhas acima, tive que definir o dataOptions assim:

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

nmoinvaz em 7 out. 2017

essa correção está disponível na versão mais recente? se não em qual linha ele precisa ser adicionado.

r-arun-r em 6 mar. 2018

Não está disponível na última versão.
Eu consegui trabalhar modificando esta seção 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);

com isso:
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(result, params); } return ngTableDefaultGetData.applyPaging(result, params);`