1

My Logic

  1. REST API fetch record from custom list
  2. 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.
  3. 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

1

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:

<html>
<head>
<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>
</head>

<body>
<div id="CustomerGrid" style="width: 100%">      
</div>
<button type="button" id="btnPaginate">Next</button>
</body>
</html>
  • 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 Oct 28 '18 at 6:54
  • 1
    @Milind I get the itemID in the function GenerateTableFromJson for loop and pass it in the second RestUrl – Sohail Shaikh Oct 28 '18 at 7:00

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.