Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

pagination with ng-table in angular

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!

like image 321
beNerd Avatar asked Nov 29 '15 02:11

beNerd


1 Answers

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
                });
            });
like image 80
Mathieu Castets Avatar answered Sep 21 '22 12:09

Mathieu Castets