Convert jQuery.ajax code to accept pagination

Question

I'm trying to take code which I found on a website's blog regarding using javascript and REST to create charts in SharePoint. The original article can be found here for reference -- http://www.cardinalsolutions.com/blog/2013/05/building_charts_ins -- I've already tried reaching out to the writer asking for help but I haven't gotten a response.

"use strict";

var EngagementChartBuilder = window.EngagementChartBuilder || {};

//The module for executing a REST query
EngagementChartBuilder.RESTQuery = function (listTitle, query) {
    var execute = function (listTitle, query) {
        var restUrl = _spPageContextInfo.webServerRelativeUrl +
            "/_api/web/lists/getByTitle('" + listTitle + "')/items";
        if (query != "") {
            restUrl = restUrl + "?" + query;
        }
        var deferred = $.ajax({
            url: restUrl,
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            }
        });

        return deferred.promise()
    };

    return {
        execute: execute
    }
}();

When this code executes, though, it only returns the first 100 results due to SharePoint's pagination. I found articles/posts which points me in the direction of using the data.d.__next into the URL and re-run the AJAX query, but trying to understand this JavaScript code is really making my head spin.

I thought I could do a do-while loop but I'm really not making any progress.

Any help would be immensely appreciated. Thanks in advance.

Answer 1

You can add $top and $skip parameters to your endpoint URL (in your case, the restUrl string) to specify how many items to retrieve and how many items to skip respectively.

1. Use the $skip=n parameter to skip the first n entries according to the $orderby parameter

2. Use the $top=n parameter to return the top n entries according to the $orderby and $skip parameters.

To page through results, you just need to update the $skip token and requery.

The following example gets items in batches of 1000:

 var endpointUrl = "/_api/lists('guid')/items"; 
$.getJSON(
    endpointUrl + "?$orderby=Id&$top=1000",
    function(data){
        processData(data); // you can do something with the results here
        var count = data.d.results.length;
        getNextBatch(count, processData, onComplete); // fetch next page 
    }
);


function getNextBatch(totalSoFar, processResults, onCompleteCallback){
    $.getJSON(
        endpointUrl + "?$orderby=Id&$skip="+totalSoFar+"&$top=1000",
        function(data){
            var count = data.d.results.length;
            if(count > 0){
                processResults(data); // do something with results
                getNextBatch(totalSoFar+count, callback); // fetch next page
            }else{
                onCompleteCallback();
            }
        }
    );
}

Integrating that concept with jQuery deferreds is another matter.

I recommend you either:

• take some time to learn about the functionality encapsulated in jQuery deferreds so that you can use them effectively, or
• abandon deferreds entirely and just use your own asynchronous functions with callbacks, as in the documentation example

Answer 2

$skip does not work in SharePoint 2013/ SharePoint line OData REST.

There is a property in the SharePoint REST API response named "__next" that you can use to implement pagination.

This link contains "$skiptoken", that is useful for pagination.

I think you should try to implement the following way :

1. Use $filter -->

   /_api/web/Lists/GetByTitle(ListTitle)/items?$filter=Id gt {valueSkipFrom}&$top={ValueTop}

2. Use "__next" link. This can be accessed as "response.d.__next"

   If it has a value, it contains the url that will return the next set of items. If it's null, you've hit the end of the result set

Please refer this link that will be guide you : https://sharepoint.stackexchange.com/questions/74777/list-api-get-all-items-limited-to-100-rows