Is there a way you can fetch SharePoint's more than 5000 items using datatable Jquery recursively in REST API? I also wanted to show the next set of data (next 1000 items) after clicking a button.

up vote 0 down vote accepted

Yes, you can use the $top property and you can recursive call the same function.

function FuncName() 
{

var siteUrl = _spPageContextInfo.webServerRelativeUrl ; 
var RestUrl = siteUrl + "/_api/web/lists/getbytitle('HelpDeskTask')/items?$top=1000&$select=ID,HelpdeskTitle,Body,HRStatus,Ageing,SLA,AssignedTo/Title,AssignedTo/ID,*&$expand=AssignedTo/Title,AssignedTo/ID&$filter=TaskType eq 'HR'";   

$.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) 
    {  
        //Recursive call to read more than 1000 data from list
        if (data.d.__next)
         {
             RestUrl = data.d.__next;
              FuncName();
           var result = data.d.results;  //you will get the data here
         }
        //to do code here
     }
    }
    error: function(data) {
    //handle error here
    }
  });
}

Update: [To fetch next batch of records into a table on click of button]

Please put the below 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 Sohail, Thanks for your reply. I already did but I also wanted to show a button where I can show the next set of 1000? – James Oct 11 at 1:30
  • @James I have added the code above to fetch next batch of records in to a table on click of a button. Please don't forget to upvote and mark the answer as accepted in case it helped you! – Sohail Shaikh Oct 11 at 13:07
  • Thanks @Sohail. – James Oct 15 at 1:02
  • @James Pleasure ;) – Sohail Shaikh Oct 15 at 4:37

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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