Skip to content
This repository has been archived by the owner on Feb 18, 2024. It is now read-only.

md-table-pagination not working for server side binding(other than page 1) #659

Open
PrashanthShivasubramani opened this issue Oct 5, 2020 · 1 comment

Comments

@PrashanthShivasubramani
Copy link

Note:
Taken exactly from fix by Luis Serrano
Raised and fixed by -Luis Serrano - https://github.com/luisnomad
Issue details - #415

Issue:
I can show data, and the pagination shows up. When I click on the different pages, the "page" value changes and a request is made to the server with the correct arguments, getting back valid data from the server. However, after the first page, all pages show up empty. I don't see any errors so I have no clue about what the issue is. I haven't found any complete example including a controller and a service that requests data from an external API so I don't have a model to follow.

HTML Code to replicate:
`




















Title Start Year Fat (g) Rating
{{show.title}} {{show.startYear}} {{show.endYear}} {{show.rating}}

        <md-table-pagination md-limit="query.limit" md-on-paginate="marvel.onPaginate" md-page="query.page" md-total="{{marvel.series.data.total}}" md-page-select="true" md-boundary-links="true"></md-table-pagination>
`

Controller to replicate:
`app.controller('marvelController', ['marvelService', '$scope', function(marvelService, $scope) {
'use strict';

var controller = this;
$scope.selected = [];

$scope.query = {
    order: 'title',
    limit: 10,
    page: 1,
    filter: ''
};

controller.success = function(data) {
    console.log ('Success!');
    controller.series = data;
}

controller.onPaginate = function (page, limit) {
    console.log ('paginate!'); // this is fired when I click the pages
    marvelService.onPaginate(page, limit, controller.success);
}

marvelService.getSeries($scope.query, controller.success);

}]);`

Service to replicate:
`app.factory('marvelService', ['$resource', function($resource) {

var apiKey = '183a5cde76132c19a818d4874fb43ada';

var vm = this;
vm.onPaginate = onPaginate;
vm.checked = false;
vm.results = [];
vm.progress = undefined;
vm.filterVisibility = false;

vm.filters = {
    search: '',
    limit: '10',
    order: '',
    page: 1
};

var series = $resource('http://gateway.marvel.com:80/v1/public/series');

var getSeries = function (filters, cb) {
    var params = filters || vm.filters;
    var offset = (params.page - 1) * params.limit + 1

    return series.get({
        limit: params.limit,
        offset: offset,
        apikey: apiKey
    }, cb).$promise;
}

var onPaginate = function (page, limit, cb) {
    return getSeries(angular.extend({}, vm.filters, {
        page: page,
        limit: limit
    }), cb);
}

return {
    getSeries: getSeries,
    onPaginate: onPaginate
};

}]);`

Fix:
The issue was in the ng-repeat directive:
| limitTo: query.limit: (query.page - 1) * query.limit

I removed that and now it works!

What doesn't work for pagination with server side binding:
ng-repeat="show in marvel.series.data.results | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit"
What works for pagination with server side binding:
ng-repeat="show in marvel.series.data.results | orderBy: query.order"
Hope it helps!

@PrashanthShivasubramani
Copy link
Author

The issue was in the ng-repeat directive:
| limitTo: query.limit: (query.page - 1) * query.limit

I removed that and now it works!

What doesn't work for pagination with server side binding:
ng-repeat="show in marvel.series.data.results | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit"
What works for pagination with server side binding:
ng-repeat="show in marvel.series.data.results | orderBy: query.order"
Hope it helps!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant