Angular ui bootstrap pagination, cannot install pages

I am trying to use pagination for my part of the application that fetches items from a list in SharePoint.

In App.js:

var app = angular.module('listWebs', ['ui.bootstrap'])
   .controller('MainCtrl', function ($scope, $q) {

jQuery.getScript(layoutsRoot + "SP.Runtime.js", function () {
            jQuery.getScript(layoutsRoot + "sp.js", function () {
                jQuery.getScript(layoutsRoot + "SP.RequestExecutor.js", function () {

                    getWebs()
                        .then(function (result) {

                            $scope.webs = result;

                            //Pagination
                            setPagination(result);

                        });

                });  // End of getscript SP.RequestExecutor.js
            }); // End of getscript SP.js
        }); // End of getscript SP.Runtime.js

function setPagination(result) {
            $scope.totalItems = result.length;
            $scope.currentPage = 1;
            $scope.noOfPages = function () {
                return Math.ceil(result.length / $scope.pageSize);

            };

        }

function getWebs(RETURNS PROMISE AFTER GETTING RESULTS FROM SP LIST)
.....

      

In Index.html:

        <table class="table table-hover">
        <thead>
            <tr class="active">
                <th>
                    Name
                </th>
                <th>
                    Created
                </th>
            </tr>
        </thead>
        <tbody ng-repeat="web in webs | limitTo:pageSize">
            <tr>
                <td>
                   {{web.title}}
                </td>
                <td>
                   {{web.created | date:dateFormat}}
                </td>
            </tr>
        </tbody>
    </table>
    <pagination ng-show="totalItems.length > 0" boundary-links="true" total-items="totalItems" ng-model="currentPage" num-pages="noOfPages" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>

      

I can't get it to display 2 pages, does anyone know why? I tried with Math.ceil (returns 1.2) and fixed value (2) but nothing works. The list contains 6 items, I set the pageSize limit to 5 (and it only displays 5 items).

EDIT: As per change for 0.6.0: "The number of pages is not determined by the number of pages, but from the total items and items per page. If there are no items in the per-page, the default is 10."

So it does NOT work with numeric pages, but instead works by using generic and page elements instead. I am using ver. 0.11.2.

+3


source to share





All Articles