daniel-nagy / md-data-table

Material Design Data Table for Angular Material
MIT License
1.9k stars 519 forks source link

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

Open PrashanthShivasubramani opened 4 years ago

PrashanthShivasubramani commented 4 years ago

Note: Taken exactly from fix by Luis Serrano Raised and fixed by -Luis Serrano - https://github.com/luisnomad Issue details - https://github.com/daniel-nagy/md-data-table/issues/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 commented 4 years ago

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!