pagination with ng-table in angular
Asked Answered
K

1

8

I am using ng-table plugin to paginate a table like this:

$scope.ngtableParams = new ngTableParams({}, {
                counts:false,
                getData: function(params) {
                    return $http.get($rootScope.app.authApi + 'questions/' + selectedSubtopic.id).then(function(data) {
                        params.total(data.data.length);
                        return data.data;
                    });
                }
            });

Funnily ng-table calls getData() function everytime a user clicks on page numbers. And hits the entire thing again and fetches all the records and displays them. So pagination is essentially useless.

I need to have a client side pagination. Is it possible with ng-table?

Tried this as well

$http.get($rootScope.app.authApi + 'questions/' + selectedSubtopic.id)
                .success(function(data){
                    $scope.ngtableParams = new ngTableParams({count:5}, {
                        counts:[],
                        paginationMaxBlocks: 13,
                        paginationMinBlocks: 2,
                        total:data.length,
                        getData: function(params) {
                            return data;
                        }
                    });
                });

Same result with the above as well!

Klipspringer answered 29/11, 2015 at 2:58 Comment(2)
can you try separating the backed call. You can do the backend call outside the ng-table decleration, fetch the data and store somewhere and in getData() you can return the stored data.Egoist
your particular about ng-table??Selves
P
1

With the latest version of ng-table I end up using the following:

function IssueCtrl(NgTableParams, IssueService) {
    var self = this;

    loadTable();

    function loadTable() {
        IssueService.getIssues().then(function (issues) {
            self.tableParams = new NgTableParams({
                page: 1,
                count: 5
            }, {
                dataset: issues // might be data instead of dataset depending on ng-table version
            });
        });
    }
 }

Client side pagination is properly working thanks to dataset.

So it should be something like this for OP:

$http.get($rootScope.app.authApi + 'questions/' + selectedSubtopic.id)
            .success(function(result){
                $scope.ngtableParams = new ngTableParams({count:5}, {
                    counts:[],
                    paginationMaxBlocks: 13,
                    paginationMinBlocks: 2,
                    total:result.length,
                    dataset: result // might be data instead of dataset depending on ng-table version
                });
            });
Participle answered 6/10, 2016 at 13:5 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.