Forward paging with SharePoint REST API

Question

My Logic

REST API fetch record from custom list
I fetch top 6 records, while I fetch record I will get one more jSON node which will have forward paging URL. I am assigning this URL to HTML5 button to data-url attribute.
Then I will get that data-url on button click, I use this URL to repeat point 1-3. I will repeat above process until paging URL is not undefined

My Code

$.when(processList(url)).done(function () { });

function processList(nextUrl) {
    var dfd = new $.Deferred();
    if (nextUrl == undefined) {
      $("#btnViewMore").hide();
      dfd.resolve();
      return;
    }
    var news = ""
    getData(nextUrl).done(function (data) {
      var items = data.d.results;
      var next = data.d.__next;
      $("#btnViewMore").removeAttr("data-url").attr("data-url", next).show();
      dfd.resolve();

      // $.when(processList(next)).done(function () {
      //   dfd.resolve();
      // });


      $.each(items, function (i, item) {
        // display record
      })
      $("#news").append(news);
    })
    return dfd.promise();
  }

Button Click

$("#btnViewMore").click(function () {
      var _url = $(this).data('url')
      $.when(processList(_url)).done(function () { });
    })

My HTML5 Button

<button type="button" name="" id="btnViewMore" class="btn btn-primary btn-lg btn-block" style="display:none">View More
  <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
</button>

Now my issue if I run full record fetch with $.when inside getData it will bring all records properly. But when I assign url to button then it start repeating same record again and again. I found out that URL is not changing with new URL due to that it is repeating data

Please let me know how can I solve this

Mohamed Derhalli · Accepted Answer · 2020-06-10 20:40:10Z

To fetch next batch of records into a table on click of button refer below code:

Please put the below HTML code into a CEWP:

<script type="text/javascript" src="/SiteAssets/Scripts/jquery.min.js"></script>     
<script language="javascript" type="text/javascript">
$(document).ready(function() {
loadMyItems();
$("#btnPaginate").click(function(){
    loadMyItems();
});
});
var siteUrl='';
var itemID = '';
var itemCount = 5;   //no. of items to display on a page
function loadMyItems() 
{

siteUrl = _spPageContextInfo.webServerRelativeUrl ; 
if(itemID == '')
{
    var RestUrl = siteUrl + "/_api/web/lists/getbytitle('HelpDeskTask')/items?$select=ID,HelpdeskTitle,Body,HRStatus,Ageing,SLA,AssignedTo/Title,AssignedTo/ID,*&$expand=AssignedTo/Title,AssignedTo/ID&$filter=TaskType eq 'HR'&$skiptoken=Paged=TRUE&$top="+itemCount;   
}
else
{
    var RestUrl = siteUrl + "/_api/web/lists/getbytitle('HelpDeskTask')/items?$select=ID,HelpdeskTitle,Body,HRStatus,Ageing,SLA,AssignedTo/Title,AssignedTo/ID,*&$expand=AssignedTo/Title,AssignedTo/ID&$filter=TaskType eq 'HR'&%24skiptoken=Paged%3DTRUE%26p_ID%3D"+itemID+"&%24top="+itemCount;   

}

$.ajax({  
    url: RestUrl,  
    method: "GET", 
    async: false,   
    headers: {
    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
    "Accept": "application/json; odata=verbose",
    "content-type": "application/json; odata=verbose"
     } ,
    success: function(data) {  
    if (data.d.results.length > 0) 
        {
        if(data.d.results.length <= itemCount)     //remove the old data 
            {  
            $("#CustomerRecordsTable").remove();
            }
        $('#CustomerGrid').append(GenerateTableFromJson(data.d.results));
        }
    },
    error: function(data) {  
       $('#CustomerGrid').append("<span class='currency_span'>Error Retreiving HelpDesk Records. Error : " + JSON.stringify(data) + "</span>");  
     }  
  });
}

function GenerateTableFromJson(objArray) 
   {  
    var tableContent = '<table id="CustomerRecordsTable" class="display" style="width:100%"><thead><tr><th>ID</th>' + '<th>TicketID</th>' +'<th>Title</th>' + '<th style="display:none;">Status</th>' + '<th>Description</th> '+ '<th>AssignedTo</th>' +'<th>Ageing</th>'+'<th>SLA</th>' + '<th style="display:none;">Date</th>' + '<th>Link</th>' + '</tr></thead>';    
    for (var i = 0; i < objArray.length; i++) 
    {  
           itemID = objArray[i].Id;
           tableContent += '<tr>';  
           tableContent += '<td>' + objArray[i].Id + '</td>';
           tableContent += '<td id="Ticket_'+objArray[i].Id+'">' + objArray[i].RequestID+ '</td>';   
           tableContent += '<td>' + objArray[i].HelpdeskTitle+ '</td>'; 
           tableContent += '<td id="Status_'+objArray[i].Id+'" style="display:none;">' + objArray[i].HRStatus + '</td>';       
           tableContent += '<td>' + objArray[i].Body + '</td>';      
           tableContent += '<td>' + objArray[i].AssignedTo['Title'] + '</td>';  
           tableContent += '<td>' + '-' + '</td>';  
           tableContent += '<td>' + '-' + '</td>';
           tableContent += '<td id="Date_'+objArray[i].Id+'" style="display:none;">' + objArray[i].TaskCompletiondDate+ '</td>';   
           tableContent += '<td>' +'<a target="_blank" href="' + siteUrl + '/Lists/HelpDesk/Dispform.aspx?ID=' + objArray[i].RequestID+ '">View</a>'+'</td>';  
           tableContent += '</tr>';  

     } 
     return tableContent;      
}
</script>

Hi, Thank you for reply. But I feel there is lot of thing is confusing, 1) I don't find where you get and pass itemID — Milind
– Milind, Commented Oct 28, 2018 at 6:54
@Milind I get the itemID in the function GenerateTableFromJson for loop and pass it in the second RestUrl — Sohail Shaikh
– Sohail Shaikh, Commented Oct 28, 2018 at 7:00

Stack Exchange Network

Forward paging with SharePoint REST API

1 Answer 1

Your Answer

Hot Network Questions

Forward paging with SharePoint REST API

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions