One Datatables.net table with multiple ajax calls

问题:

I am new here, so exuse me in advance for the lengthy question. I'm new to SP2010, and so far followed the following tutorial to make JQuery Ajax call to my SP List: Who Needs a Data View Web Part? SharePoint REST and DataTables.net

My (and everybody's) problem is, that SP2010 listdata.svc returns only the first 1000 entries in the JSON. However the tutorial suggest a pre-filtering method to call for only the data the user would need, in my case, I would like to load all my 200+ entries to the table, and then let the user to select/filter whatever he/she wants.

I managed to make the two Ajax calls (one with first 1000 entries, and the other with the rest above 2000 - for testing, to make it easy to see, which of them made into the table), and in debuggers both GET requests go out and come back with status 200-OK, and the data, but only one of them are loaded into the table.

The question: Are there any methods to combine the returning jqXHR responses before passing to the Datatable, or is there any setting, that after the table initialization, the second data doesn't overwrite the first one? I know, that the multiple ajax calls are a "no go" for most, but in my case, it is not a problem due to the speed of my server, and the usage frequency of the table, but so far I found solutions in the topic of multiple calls to populate multiple tables.

My code so far:

<script type="text/javascript">
function LoadData()
{
var call = $.ajax({
            url: "https://SP2010_siteaddress.com/site/_vti_bin/listdata.svc/Listname?$select=Data1,Data2,Data3,Data4,Data5",
           type: "GET",
           dataType: "json",
           headers: {
                Accept: "application/json;odata=verbose"
            }       
        });
		
var call2 = $.ajax({
            url: "https://SP2010_siteaddress.com/site/_vti_bin/listdata.svc/Listname?$select=Data1,Data2,Data3,Data4,Data5&$skiptoken=2000",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }       
        });
		
 (call, call2).done(function (data,textStatus, jqXHR){
            	$('#example')
					.on('xhr.dt', function ( e, settings, json ) {
					for ( var i=0, ien=json.aaData.length ; i<ien ; i++ ) {
					json.aaData[i].sum = json.aaData[i].one + json.aaData[i].two;
					}
					// Note no return - manipulate the data directly in the JSON object.
					} )
				.dataTable({
					ajax: "data.json",
                       	"bServerside" : true,
						"bProcessing": false,
						"aaData": data.d.results,
						"aoColumns": [
							{ "mData": "Data1" },
							{ "mData": "Data2" },
							{ "mData": "Data3" },
							{ "mData": "Data4" },
							{ "mData": "Data5" }
							],
							"bRetrieve": true,
				//	"initComplete": function(settings, json) {
				//	alert( 'DataTables has finished its initialisation.' );
				//			}
							});

			call.fail(function (jqXHR,textStatus,errorThrown){
            alert("Error retrieving Tasks: " + jqXHR.responseText);

});
});
}
</script>

Thanks in advance to any suggestions how to tackle this.

回答1:

If you cannot avoid the limitation of 1000 records per Ajax call, you can use the code below.

It uses $.when to execute callback when both Ajax calls were successful.

function LoadData()
{
   var call1 = $.ajax({
      url: "https://SP2010_siteaddress.com/site/_vti_bin/listdata.svc/Listname?$select=Data1,Data2,Data3,Data4,Data5",
      type: "GET",
      dataType: "json",
      headers: {
         Accept: "application/json;odata=verbose"
      }       
   });

   var call2 = $.ajax({
      url: "https://SP2010_siteaddress.com/site/_vti_bin/listdata.svc/Listname?$select=Data1,Data2,Data3,Data4,Data5&$skiptoken=2000",
      type: "GET",
      dataType: "json",
      headers: {
         Accept: "application/json;odata=verbose"
      }       
   });

   // When both Ajax requests were successful
   $.when(call1, call2).done(function(a1, a2){
      // a1 and a2 are arguments resolved for the call1 and call2 ajax requests, respectively.
      // Each argument is an array with the following structure: [ data, statusText, jqXHR ]

      // Merge data from two Ajax calls
      var data = a1[0].d.results.concat(a2[0].d.results);

      $('#example').dataTable({
         "aaData": data,
         "aoColumns": [
            { "mData": "Data1" },
            { "mData": "Data2" },
            { "mData": "Data3" },
            { "mData": "Data4" },
            { "mData": "Data5" }
         ]
      });
   });
}