SharePoint 2013 REST how to add pagination?

Question

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>

Answer 1

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>

Answer 2

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.

Answer 3

You can use this plugin and try as follows:

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

Reference

Answer 4

$(function() {
        $.widget("zpd.paging", {
            options: {
                limit: 5,
                rowDisplayStyle: 'block',
                activePage: 0,
                rows: []
            },
            _create: function() {
                var rows = $("tbody", this.element).children();
                this.options.rows = rows;
                this.options.rowDisplayStyle = rows.css('display');
                var nav = this._getNavBar();
                this.element.after(nav);
                this.showPage(0);
            },
            _getNavBar: function() {
                var rows = this.options.rows;
                var nav = $('<div>', {class: 'paging-nav'});
                for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
                    this._on($('<a>', {
                        href: '#',
                        text: (i + 1),
                        "data-page": (i)
                    }).appendTo(nav),
                            {click: "pageClickHandler"});
                }
                //create previous link
                this._on($('<a>', {
                    href: '#',
                    text: '<<',
                    "data-direction": -1
                }).prependTo(nav),
                        {click: "pageStepHandler"});
                //create next link
                this._on($('<a>', {
                    href: '#',
                    text: '>>',
                    "data-direction": +1
                }).appendTo(nav),
                        {click: "pageStepHandler"});
                return nav;
            },
            showPage: function(pageNum) {
                var num = pageNum * 1; //it has to be numeric
                this.options.activePage = num;
                var rows = this.options.rows;
                var limit = this.options.limit;
                for (var i = 0; i < rows.length; i++) {
                    if (i >= limit * num && i < limit * (num + 1)) {
                        $(rows[i]).css('display', this.options.rowDisplayStyle);
                    } else {
                        $(rows[i]).css('display', 'none');
                    }
                }
            },
            pageClickHandler: function(event) {
                event.preventDefault();
                $(event.target).siblings().attr('class', "");
                $(event.target).attr('class', "selected-page");
                var pageNum = $(event.target).attr('data-page');
                this.showPage(pageNum);
            },
            pageStepHandler: function(event) {
                event.preventDefault();
                //get the direction and ensure it's numeric
                var dir = $(event.target).attr('data-direction') * 1;
                var pageNum = this.options.activePage + dir;
                //if we're in limit, trigger the requested pages link
                if (pageNum >= 0 && pageNum < this.options.rows.length) {
                    $("a[data-page=" + pageNum + "]", $(event.target).parent()).click();
                }
            }
        });
    }); })(jQuery);

CSS:

.paging-nav {   text-align: right;   padding-top: 2px; }

.paging-nav a {   margin: auto 1px;   text-decoration: none;   display: inline-block;   padding: 1px 7px;   background: #91b9e6;   color: white;   border-radius: 3px; }

.paging-nav .selected-page {   background: #187ed5;   font-weight: bold; }

.paging-nav,
#divdynamic {   width: 400px;   margin: 0 auto;   font-family: Arial, sans-serif; 
}

https://peakfinders.blogspot.com/2015/12/table-pagination-using-htmlcss-in.html?showComment=1604922132794#c3421701014647177502