CODEWITHSUNDEEP
javascriptangularjspaginationangular-ui-bootstrap
Thilak Raj
Thilak Raj

Reputation: 920

How to do the server side pagination using angular-ui bootstrap using skip parameter?

i have a number of items generated using ng-repeat, i have to add pagination.but everywhere i can see by getting the count value of items, i can add. but i am not able to get using skip. i.e if the skip value is 10, it will skip the first items and list the other items,i need to do like using the skip value using angular-ui bootstrap.
following code inside services

mainEvents: function() {
        var self = this;
        var skipNumber=2;
        return $http.get(UrlService.baseUrl + '/event/upcoming?count='+ skipNumber).then(function(response) {
            // var events = response.data;
            var events = response.data.events;
            var upEvents=[];

            var eventsLen = events.length;
            for (var i = 0; i < eventsLen; i++) {
                self.prepareForRendering(events[i]);
            }
            var totalItems = response.data.events.length;

            angular.copy(response.data.events, upEvents)
             console.log(upEvents);
            // angular.copy(response.data.tracks, $scope.tracks)
            return events;

        }, function(response) {
            return $q.reject(response.data.error)
        });
    },
$scope.pageChanged = function() {
    mainEvents();
  };

markup

<ul>
  <li ng-repeat="event in events">{{event.name}}</li>
</ul>

<pagination total-items="totalItems" ng-model="skipNumber" ng-change="pageChanged()" items-per-page="1"></pagination>

Based on page number clicked,skipNumber to be incremented by 10, 20 etc.., How to do it.can anyone please help me

Upvotes: 0

Views: 584

Answers (1)

Georgy
Georgy

Reputation: 2462

Working fiddle.

The events variable is an array, so you can use slice method with it: ng-repeat="event in events.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage )".

You have set itemsPerPage as 1 here: items-per-page="1" and currentPage is ($scope.skipNumber / $scope.itemsPerPage) + 1 (the devision result here must be an integer).

The resulting html would look like:

<ul>
  <li ng-repeat="event in events.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)">{{event.name}}</li>
</ul>

<pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></pagination>

Upvotes: 1

Related Questions