Ng-table: pagination doesn't work with custom data from json file
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>
zymr-keshav
All 10 comments
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.
batjko
on 11 Aug 2016
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.
fsm3xpert
on 11 Aug 2016
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.
tandibar
on 12 Aug 2016
@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
on 19 Dec 2016
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);
}
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 beif (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
.
christianacca
on 22 Dec 2016
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.
enpo
on 3 Jan 2017
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 };
nmoinvaz
on 7 Oct 2017
is this fix available in latest version? if not at which line it needs to be added.
r-arun-r
on 6 Mar 2018
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);`
davidecampello
on 8 Jan 2019
Related issues
yujiayinshi
·
4Comments
andreicristianpetcu
·
6Comments
wayjake
·
6Comments
yujiayinshi
·
8Comments
jlebleu
·
3Comments
Most helpful comment
Ok I fixed it, it's because
dataOptionsmay beundefined. So the code should be