locked
Angular JS Pagination in sharepoint 2013 RRS feed

  • Question

  • I have the code for subsite iteration of sharepoint. Code will bring out the documents in each sites document library. I am binding the data on the page using angular. I have around 2000 documents to show. I am getting all the records on a single sharepoint page in one go. I want to implement pagination here. One approach, I have tried is through angular filter pagination, but that will only work, when page loads the complete data. I want my page to send the request to server when I click on next. I want to display 20 records per page.below is my code:

    var app = angular.module('SharePointAngApp', []);  
               var obj=[];
       
       app.factory("Item", function() {
       //arr1=[]
         items=[];   
       GetListItems();
       for(var l=0;l<8;l++)
    {
    getGUID(sites[l].webAddress);
    //items = [];  
    getListCollection(sites[l].webAddress,sites[l].webTitle,wf,items);

    console.log(arr1);
    }   
      return {
        get: function(offset, limit) {
          return items.slice(offset, offset+limit);
        },
        total: function() {
          return items.length;
        }
      };
    });
       
             app.controller('spCustomerController', function($scope,Item) { 
    $scope.itemsPerPage = 5;
      $scope.currentPage = 0;

      $scope.range = function() {
        var rangeSize = 5;
        var ret = [];
        var start;

        start = $scope.currentPage;
        if ( start > $scope.pageCount()-rangeSize ) {
          start = $scope.pageCount()-rangeSize;
        }

        for (var i=start; i<start+rangeSize; i++) {
          ret.push(i);
        }
        return ret;
      };


      $scope.prevPage = function() {
        if ($scope.currentPage > 0) {
          $scope.currentPage--;
        }
      };

      $scope.prevPageDisabled = function() {
        return $scope.currentPage === 0 ? "disabled" : "";
      };

      $scope.nextPage = function() {
        if ($scope.currentPage < $scope.pageCount() - 1) {
          $scope.currentPage++;
        }
      };

      $scope.nextPageDisabled = function() {
        return $scope.currentPage === $scope.pageCount() - 1 ? "disabled" : "";
      };

      $scope.pageCount = function() {
        return Math.ceil($scope.total/$scope.itemsPerPage);
      };

      $scope.setPage = function(n) {
        if (n > 0 && n < $scope.pageCount()) {
          $scope.currentPage = n;
        }
      };

      $scope.$watch("currentPage", function(newValue, oldValue) {
        $scope.pagedItems = Item.get(newValue*$scope.itemsPerPage, $scope.itemsPerPage);
        $scope.total = Item.total();
      });  
             });

    I am using this method to implement the pagination functionality. If I am passing the hard coded values in app.factory, I am getting the results. But, if I am writing the functions which are returning the same results, it is not giving me the results.

    Please look into it, if it has some problems or suggest some different approach

    Sunday, February 18, 2018 12:01 PM

All replies

  • Hello,

    You can try to use rest api for your paging needs. Check this article : http://ramanjispcode.blogspot.sg/2016/06/pagination-with-angularjs-and-your-api.html 


    Best regards,

    Riwut Libinuko
    SharePoint Architect, Singapore
    Office Servers and Services MVP | Singapore
    Blog : http://blog.libinuko.com

    Sunday, March 11, 2018 5:58 AM