3

I am using SharePoint 2013 REST to display my list data in a table

My list is getting long and how can I have pagination links blow my table?

my code:

<script> 
 var app = angular.module('SmartphoneOSList', ['ngSanitize']);  
 app.controller('ListController', function ($scope, $http) {  
 $http({  
    method: 'GET',  
    url: "https://myserver/sites/testdev/_api/web/lists/getByTitle('Announce')/items",  
    headers: { "Accept": "application/json;odata=verbose" }  
   }).success(function (data, status, headers, config) {  
    $scope.items = data.d.results;  
    $scope.displayFormUrl =  "https://myserver/sites/testdev/Lists/Announce/DispForm.aspx";  
   }).error(function (data, status, headers, config) {  
    //...
  });  
 });  
 </script>  


<h1>Welcome</h1>  
<div ng-app="SmartphoneOSList">  
    <table class="table table-bordered" ng-controller="ListController">   
      <tr ng-repeat="item in items">  
        <td><a href="{{displayFormUrl}}?ID={{item.ID}}">{{item.Title}}</a></td>
        <td ng-bind-html="item.Content"></td>  
      </tr>  
    </table>  
</div>
2
  1. Get item count with /ItemCount.
  2. Define a page count you want, like 30, and devide ItemCount on that to get page count.
  3. Loop it with ng-repeat
    <div ng-repeat="page in pages" ng-click="reload(page)">{{page}}</div>.
  4. Reload items ($scope.items = ...) where you append "$skiptoken=Paged=TRUE&p_ID=" + page and $top=30 to your query.

Example

Here is a somewhat simplified example based on your code. Note I use underscore for range and default announcement list (so Body instead of Content). Tested on SharePoint Online.

app.controller('ListController', function($scope, $http, $q) {
  var listUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Announce')/";
  var itemLimit = 10;

  $scope.load = function(page) {
    $scope.activePage = page;

    $q.all({
      items: $http.get(listUrl + "Items", {
        params: {
          $select: "Title,Body",
          $top: itemLimit,
          $skiptoken: "Paged=TRUE&p_ID=" + ((page - 1) * itemLimit)
        }
      }).then(function(res) {
        return res.data.value;
      }),
      itemCount: $http.get(listUrl + "ItemCount").then(function(res) {
        return res.data.value;
      })
    }).then(function(res) {
      $scope.items = res.items;
      var pageCount = Math.floor(res.itemCount / itemLimit) + 1;
      $scope.pages = _.range(1, pageCount + 1);
    });
  };

  $scope.load(1);
});  

<div ng-controller="ListController">  
  <table class="table table-bordered">   
    <tr ng-repeat="item in items">  
      <td>{{item.Title}}</td>
      <td ng-bind-html="item.Body"></td>  
    </tr>  
  </table>  

  <nav>
    <ul class="pagination">
      <li ng-repeat="page in pages" ng-class="{active: activePage === page}">
        <a href="#" ng-click="load(page)">{{page}}</a>
      </li>
    </ul>
  </nav>
</div>
  • If the item count is really large, you should use the $skip and $top directives in your REST query as described on MSDN (msdn.microsoft.com/en-us/library/office/…). – pholpar Nov 13 '14 at 7:40
  • 1
    I don't think $skip works @pholpar, my example above does, it's how I do it on SharePoint online at least (just look at _next when you query /Items). – eirikb Nov 13 '14 at 7:42
  • You are right regarding the "new" _api interface: "It is a known that the $skip functionality isn't available yet in the service" :-( stackoverflow.com/questions/26305776/… However, it is still available for the "old-school" _vti_bin/ListData.svc. See samples: platinumdogs.me/2013/03/14/… sharepoint.stackexchange.com/questions/45719/… sharepointempower.com/Blog/Post/15/… – pholpar Nov 13 '14 at 8:00
  • Could you give an example with code for pagination – Mehdi Jalal Nov 13 '14 at 8:02
  • 2
    @MehdiJalal the explanation above should be a sufficient starting point IMHO, after all you might want to implement this in smart-table, ng-grid, ngtable or the other pals and so the code would be quite different. However I will oblige and spoon-feed you as soon as I get home from work in some hours – eirikb Nov 13 '14 at 8:09
1

This part: $skiptoken: "Paged=TRUE&p_ID=" + ((page - 1) * itemLimit) is not going to work as you can expect. If you remove any item on the list/library or change the sort order, it won't work. The only thing which works at the moment is to get data.d.__next which contains link to the next page. You can eventually store link to previous page, so thus you can get two way paging, but without "jump" to page number X.

0

You can use this plugin and try as follows:

$(document).ready(function() {
$('#table table-bordered').dataTable( {
    "pagingType": "full_numbers"
} );
} );

Reference

  • No I don't want data tables – Mehdi Jalal Nov 13 '14 at 6:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.