Calculating total-items in AngularJs Pagination (u

问题:

I use controllerAs and avoid using the $scope as a model.
I want to add pagination in my search result. I have a paging object in my controller as below, which will be shared with angular service and then with the server API.

 vm.paging = {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 0
    };

totalCount will be set by server and then be read from response. My pagination in html:

  <pagination total-items="ctrl.pageCount"
              items-per-page="ctrl.paging.pageSize"
              ng-model="ctrl.paging.pageNumber"
              class="pagination-sm"
              boundary-links="true"
              ng-change="ctrl.find()">
              </pagination>

I calculate pageCount in controller as below:

vm.pageCount = function () {
        return Math.ceil(vm.paging.totalCount / vm.paging.pageSize);
    };  

But it doesn't work. when I set vm.pageCount = 1000; it works. It seems the problem is the function. How can I fix this problem? (the buttons are disabled and It should return 100 pages, not one! )

Update: Sample Plunker

回答1:

1. you CAN use an Immediately Invoked Function Expression (IFEE) to get your vm.pageCount like so

   ctrl.pageCount = (function() {
       return Math.ceil(ctrl.paging.totalItems / ctrl.paging.pageSize);
   })();
   

2. but you don't need to calculate pageCount and put it under total-items (the amount of pages in the pagination will be calculated automatically), you should provide it the length of you record array instead!

lets say if you get table data vm.data from http, you should place the length of this data inside total-items like so

     total-items="vm.data.length"

HTML

    <uib-pagination total-items="ctrl.paging.totalItems"
          items-per-page="ctrl.paging.pageSize"
          ng-model="ctrl.paging.pageNumber"
          class="pagination-sm"
          boundary-links="true"
          ng-change="ctrl.find()">
          </uib-pagination>

JS

    ctrl.paging = {
        pageNumber: 1,
        pageSize: 10,
        totalItems: response.length // this is your remote data
    };

I've made this plunker for you

EDIT 1

since version 0.14.0, the directives are prefixed by uib-

Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier, check our migration guide.

so you should also use uib-pagination (instead of pagination) because your plunk uses the 1.3.2 version.

回答2:

I did it! Of course, with the guidance of my colleague :) . As in my plunk (script.js), I hadn't Initialized the vm.paging object after the response, so the computing was based on default values in vm.paging. Since totalCount was 0, always the Division result was 1 and I had just one page. So I edited the vm.find body as below:

vm.find = function () {
            vm.result.length = 0;     
vm.findingPromise = myService.find(vm.filter, vm.paging);
            vm.findingPromise
                .then(function (response) {
                    vm.result = response.data.result;
                    // EDITED PART:
                    vm.paging = response.data.paging;
                    //   

                }, function (response) {
                    var r = response;
                    ngNotify.set('Some problems occurred!',
                        {
                            type: 'error',
                            position: 'top',
                            sticky: true
                        });
                });

And also, I couldn't take advantages of uib-pagination, but when I replaced ui-bootstrap-tpls-1.3.2.min.js anywhere I was using ui-bootstrap-tpls.min.js before, it works correctly.
Also I removed the function of computing pageCount. With many thanks to svarog.