Populate all Data to DataTable using Recursive Calls

var TotalItemCount=0;

 $(document).ready(function () {

//UPDATED CODE START  //

Remove datatable warnings on loading 

$.fn.dataTable.ext.errMode = ‘none’;    

var siteurl = “https://yoursitename/”;       

var ItemCount= GetItemCount(siteurl);   

ExecuteOrDelayUntilScriptLoaded(waitMessage, “sp.js”);   

createRestUrl(siteurl,ItemCount);

}); 

//Step 1. get total item count of threshold exceed list.

function GetItemCount(siteurl){   

 var ItemCount=’4993′;     

///Use this code to get the count in list or else if known directly define the ItemCount as above.

$.ajax({         

  url: siteurl+”/_vti_bin/listdata.svc/LISTNAME/$count”,           

 method: “GET”,           

async: false,   

 contentType: “text/xml; charset=\”utf-8\””,           /

headers: { “Accept”: “application/json; odata=verbose” },           

success: function (data) {               

ItemCount = data.d.results.length;           

},            /

error: function (data) {               

console.log(data);             } 

 });     

return ItemCount; 

 }

function createRestUrl(siteurl, ItemCount) { 

        if(ItemCount<=5000) {      

var listServiceUrl = siteurl+ “/_vti_bin/listdata.svc/LISTNAME?$top=5000”;

}

else {

var listServiceUrl = siteurl+ “/_vti_bin/listdata.svc/LISTNAME?$top=1000”;       

}        

 $.when(processList(listServiceUrl,ItemCount)).done(function () {

});

}

function processList(nextUrl,ItemCount) {       

    var dfd = new $.Deferred();               

if (nextUrl == undefined) {           

dfd.resolve(); waitDialog.close();         

  return;       

}       

  //Step 4: Repetative call to getJSONDataFromUrl() to get Ajax Json object.        getJSONDataFromUrl(nextUrl).done(function (listItems) {     

          TotalItemCount = TotalItemCount+listItems.d.results.length;       

            var items = listItems.d.results;               

var next = listItems.d.__next;                 $.when(processList(next,ItemCount)).done(function (){               

               dfd.resolve();                        

      });                     

  var tableHTML=”;           

//Create datatable object           

var table = $(‘#example’).DataTable();

      $.each(items, function(index, obj){

tableHTML +='<tr><td>’+obj.ColumnName1+'</td><td>’+obj.ColumnName2+'</td><td>’+obj.Id+'</td><td>’+obj.ColumnName3+'</td><td>’+obj.ColumnName4+'</td></tr>’;           

 });            

 table.rows.add($(tableHTML)).draw();

//Append each list row to data tabel               

  });     

return dfd.promise();   

// Repetative call to getJSONDataFromUrl() to get Ajax Json object.

function getJSONDataFromUrl(endpoint) {
        return jQuery.ajax({         

  url: endpoint,         

  method: “GET”,       

    headers: {                “Accept”: “application/json; odata=verbose”,       

        “Content-Type”: “application/json; odata=verbose”       

    }     

  });

}

///This is a method to display a window until the datatable loads the data…

function waitMessage() {
window.parent.eval(“window.waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose(‘Hang On,This may take around a minute or a two to load.’, ”, 150, 550);”);
}

 

Create a Table in HTML file and link this js file.

Here, the table id is example.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s