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

Question

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

Can you please make it more understandable? You want to have set of 10 fresh data values from backend on each call and it has to be subsequent data. — Gandalf the White
– Gandalf the White, Commented May 18, 2016 at 11:01
@GandalftheWhite from the backend i am using skip. if i send request with apiurl?skip=10 it will skip first 10 items, for the first page skip should be 0, for the second page it should be 10 goes on like this. i want to display only 10 items at a time — Thilak Raj
– Thilak Raj, Commented May 18, 2016 at 11:05
I think the ng-model would actually be the page number so remove it from the pageChanged() method and either on your client site or on server site you need to multiply the current page number by the number of items per page to get the skip number. — Raul A.
– Raul A., Commented May 18, 2016 at 12:46

Georgy · Accepted Answer · 2016-05-19 13:13:07Z

1

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>

edited May 19, 2016 at 13:13

answered May 18, 2016 at 11:22

Georgy

2,4623 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Thilak Raj Over a year ago

i have used like u mentioned. but if i change items-per-page also, it is showing only one item. in console i am getting 4 items

Georgy Over a year ago

@Coder I don't think I understand you right. items-per-page is set to 1 in your snippet, so it does what you have specified, show 1 item on the page. Was it the problem?

Thilak Raj Over a year ago

i have changed

items-per-page' to 4, but it is not showing 4 items . instead it is showing one.  and also when it is 1, pagecount is not incremented. it is showing

previous, 1 , next` but next and previous is disabled. can u tell me where i am doing wrong

Thilak Raj Over a year ago

if i remove events.slice in ng-repeat. it will show all the events, but not when i added it

Georgy Over a year ago

@Coder I have made some changes, would you check them, is this what you want to achieve?

|

Collectives™ on Stack Overflow

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

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related