As we know that SharePoint has threshold limit of 5000 items in fetching, the below snippet will help to fetch the list items more than 5000 items. I have tested this for 100000 list items and it took 30 sec approximately to load.
Please note that this is a CEWP based snippet and has been implemented in JQuery.
<html>
<head>
<title></title>
<style>
#ddlYears {
min-width: 150px;
}
</style>
<script type="text/javascript" src="https://{Site url}y/VIP/SiteAssets/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
var queryBatchLimit = 5000;
var total = 0;
var finalResults = [];
var yearsRange = [1999];
if (jQuery == undefined)
{
alert('jQuery Library is not loaded');
}
else
{
jQuery(document).ready(function ()
{
processQuery(0);
});
}
function processQuery(beginId)
{
getOrders(beginId);
}
function getOrders(beginId)
{
var finalQuery = "$select=Id,Title,Creator&$filter=Id gt '" + beginId + "' &$top=" + queryBatchLimit;
var _url = _spPageContextInfo.siteAbsoluteUrl + "/VIP/_api/web/lists/getbytitle('VIPLNDocuments')/Items?" + finalQuery;
console.log("Begin Id : " + beginId);
console.log("Query Url : " + _url);
$.ajax({
url: _url,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data)
{
if (data.d.results && data.d.results.length > 0)
{
var lastId = data.d.results[data.d.results.length - 1].Id;
finalResults.push(data.d.results);
total = total + data.d.results.length;
processQuery(lastId);
}
else if (finalResults.length > 0)
{
//drawChart(finalResults, reportType);
alert(total);
}
else
{
finalResults = [];
//drawChart(finalResults, reportType);
alert('No results found')
};
},
error: function (data)
{
alert("failed to load data. Please check the error: " + args.get_message());
//failed(data);
}
});
}
function getQueryStringParameterByUrl(param, url)
{
url = decodeURIComponent(url);
var params = url.split("&");
if (params != "undefined")
{
for (var i = 0; i < params.length; i = i + 1)
{
var singleParam = params[i].split("=");
if (singleParam[0].indexOf(param) > -1)
{
return singleParam[1];
}
}
}
}
</script>
</head>
<body>
<div>
Please select the years to filter the data
<select id="ddlYears"></select>
<button type="button" id="btnFilter">Filter</button>
</div>
</body>
</html>