SharePoint 2013: How to implement pagination in REST services

SharePoint REST services are the hot topic these days. From developers perspective they are very simple and straightforward to use. Most of the things cab be achieved through RESTs. In this post we will learn how to implement pagination while reading list items from list.

Its not always good to get all thousands of items from list and show in page. It will make your page behave slowly and will become heavy. The best approach is show limited items at a time and implement pagination. But is this possible if you are using REST service to get list items? You will first start looking for any parameter for pagination.  But you will not find any parameter to send so server can understand which set of items needs to return. Then what is the option?

It is so simple. For this go through the response of first REST Ajax call. If you read each property carefully you will get answer for pagination. Properly "__next" is nothing but the REST url for next page :). Is it simple? Yes. So use "data.d.__next" to get next page items. REST service always returns this property whenever there is possible next set of items otherwise returns null.

To implement pagination $top parameter is important, so in default REST URL define the $top value and then data.d.__next will work properly. it will always return next $top rows.

Default REST URL:

var DEFRESTURL = "/sites/OnePalSh/_api/web/lists/getbytitle('StudentsList')/items?&$top=5";

__NEXT:

Below basic example of pagination will help you to understand implementation.

HTML file:

<script type="text/javascript" src="/sites/OnePalSh/Site%20Assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/sites/OnePalSh/Site%20Assets/js/knockout.3.2.0.js"></script>
<script type="text/javascript" src="/sites/OnePalSh/Site%20Assets/js/ShowListItems.js"></script>

<div>

All lists Items:

<div class="table-responsive">
  <table class="table">

<thead>
<th> Name </th>
<th> Class </th>
<th> Age </th>
<th> City </th>
</thead>
<tbody data-bind="foreach: Students">
<tr>

<td>
<span data-bind="text: Name"></span>
</td>

<td>
<span data-bind="text: Class1"></span>
</td>

<td>
<span data-bind="text: Age"></span>
</td>

<td>
<span data-bind="text: City"></span>
</td>

</tr>
</tbody>    

  </table>
</div>
<div class="btn-group">
  <button class="btn" data-bind="click: PreviousItems">Previous</button>
  
  <button class="btn" data-bind="click: GetNextItems">Next</button>
</div>

</div>


JS File:

var DEFRESTURL = "/sites/OnePalSh/_api/web/lists/getbytitle('StudentsList')/items?&$top=5";
var RESTURL = DEFRESTURL;
var urlArr = new Array();

$(document).ready(function () {
urlArr.push(RESTURL);
    GetListItems();
});


function GetListItems()
{

 var self = this;

 self.Student = function(name,class1,age,city)
 {
 var self = this;
 self.Name = name;
 self.Class1 = class1;
 self.Age = age;
 self.City = city;
 }

self.Students = ko.observableArray([]);


 $.ajax({
 url: RESTURL,
 type: "GET",
 headers: {
 "accept": "application/json;odata=verbose",
 },
 success: function (data) {
if(data.d.__next != null)
{
urlArr.push(data.d.__next);
}
 $.each(data.d.results, function () {
  self.Students.push(new self.Student(this.Name,this.Class,this.Age,this.City));
 });
 ko.applyBindings(self);
 },
 error: function (error) {
 ko.applyBindings(self);
 alert(JSON.stringify(error));
 }
 });

 self.GetNextItems = function()
 {
RESTURL = urlArr[urlArr.length - 1];
self.Students.removeAll();

$.ajax({
 url: RESTURL,
 type: "GET",
 headers: {
 "accept": "application/json;odata=verbose",
 },
 success: function (data) {
if(data.d.__next != null)
{
urlArr.push(data.d.__next);
}
 $.each(data.d.results, function () {
  self.Students.push(new self.Student(this.Name,this.Class,this.Age,this.City));
 });
 
 },
 error: function (error) {
 ko.applyBindings(self);
 alert(JSON.stringify(error));
 }
 });
 }

 self.PreviousItems = function()
 {
urlArr.pop();
RESTURL = urlArr[urlArr.length - 1];
self.Students.removeAll();

$.ajax({
 url: RESTURL,
 type: "GET",
 headers: {
 "accept": "application/json;odata=verbose",
 },
 success: function (data) {
if(data.d.__next != null)
{
urlArr.push(data.d.__next);
}
 $.each(data.d.results, function () {
  self.Students.push(new self.Student(this.Name,this.Class,this.Age,this.City));
 });
 
 },
 error: function (error) {
 ko.applyBindings(self);
 alert(JSON.stringify(error));
 }
 });
 }


}

This way you can do pagination in SharePoint 2013 REST services.