pagination doesn't work with custom data from json file

[zymr-keshav]

I am using custom data from .json file and want to paginate the data but all data comes in single page ; why so? below are my 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>

[batjko]

Are you sure it's related to the fact that your source is a JSON file? I'm having the same issue, I think, though my data source is a service.

That service returns a promise and when it resolves I set params.total(), as described in the documentation before returning the result, but pagination still won't work.

[fsm3xpert]

I've same problem, when paging on group data. So, i add these lines at the end on getGroups function.

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

The pagination working on either used default or custom.

[tandibar]

Yes, this is nearly the same solution i mentioned in #872. I am not sure if the settings.dataOptions.applyPaging check is important as it is manually set to false some lines above.

[miparnisari]

@fsm3xpert, @tandibar, I applied the solution proposed by @fsm3xpert and it works, but I get the following in my console:

Possibly unhandled rejection: {}

Any ideas?

[miparnisari]

Ok I fixed it, it's because dataOptions may be undefined. So the code should be

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

[christianacca]

BTW, a future release of ng-table will mean that nested setting values (EG dataOptions) will never be undefined

On Wed, Dec 21, 2016 at 7:19 PM, María Inés Parnisari < [email protected]> wrote:

Ok I fixed it, it's because dataOptions may be undefined. So the code should be

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

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/esvit/ng-table/issues/893#issuecomment-268614815, or mute the thread https://github.com/notifications/unsubscribe-auth/AA2HPk4I47xMpIlEbXSDSCMUu0mlGn7Vks5rKXu4gaJpZM4Jagxg .

[enpo]

in case anyone has the same issue like I do, which is that changing the library code is not an option for whatever reason, I found a workaround:

The issue seems to be that grouping simply is not implemented to deal with paged data. What I ended up doing is to retrieve my data for the desired page and cache the total number of items in a variable. actualTotal = params.total() I then implemented a response interceptor as described in http://ng-table.com/#/global-customization/demo-response-interceptors. There I can set the total value back to the cached value. This fixes the display of the paging.

There is one remaining problem, which is that if the user tries to go to another page other than 1 you won't see anything as the grouping slices the data array with this code: var pagedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count()); Simple workaround for this is also to set the page to 1 in the getData function once you have retrieved the data, cache the actual page and reset in the interceptor.

[nmoinvaz]

After applying the suggested fix, filtering stopped working for me. In order to fix it, in the lines above, I had to set the dataOptions like so:

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

[r-arun-r]

is this fix available in latest version? if not at which line it needs to be added.

[davidecampello]

It's not available in the last version. I got it working modifying this section of code: if (sortDirection) { var orderByFn = ngTableDefaultGetData.getOrderByFn(); var orderBy = util_1.convertSortToOrderBy({ value: sortDirection }); result = orderByFn(result, orderBy); } return ngTableDefaultGetData.applyPaging(result, params);

with this: 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 }); result = orderByFn(result, orderBy); } if (!settings.dataOptions.applyPaging) { return ngTableDefaultGetData(result, params); } return ngTableDefaultGetData.applyPaging(result, params);`