Paging in SharePoint JavaScript Client Object Model

Paging can be of great help when you want to improve the performance of your code especially when you are working on front-end development and want to reduce the page response time. Let us see how can be implement paging when working with the JavaScript Client Object Model.

	var listItems; // The list of retrieved items.
	var query; // For paging, reuse the same query object.
	var targetList; // The list from which to retrieve items.
	var clientContext;
	function runCode() {
	clientContext = new SP.ClientContext();
	targetList = clientContext.get_web().get_lists().getByTitle('Announcements');
	query = new SP.CamlQuery();
	//Specifying the RowLimit will determine how many items will be fetched in one call to the server.
	query.set_viewXml("<View><ViewFields><FieldRef Name='Title'/></ViewFields><RowLimit>2</RowLimit></View>");
	listItems = targetList.getItems(query);
	clientContext.load(listItems);
	clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
	}
	function onQuerySucceeded() {
	var message = "Titles, two at a time:\n";
	var listEnumerator = listItems.getEnumerator();
	while (listEnumerator.moveNext()) {
	message += "\nTitle=" + listEnumerator.get_current().get_item("Title")
	}
	alert(message);
	//Gets the id of the last element from the returned collection along with the query.
	var position = listItems.get_listItemCollectionPosition();
	//Position will be null if all the items in the collection are fetched and there are no more items to be fetched.
	if (position != null) {
	//If more items are to be fetched, make a second call to the server and fetch the next group of items.
	query.set_listItemCollectionPosition(position);
	listItems = targetList.getItems(query);
	clientContext.load(listItems);
	//Call the same function recursively until all the items in the current criteria are fetched.
	clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
	}
	}
	function onQueryFailed(sender, args) {
	alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
	}
	//Call the function after the sp.js is loaded.
	ExecuteOrDelayUntilScriptLoaded(runCode, "sp.js");

view raw paging.js hosted with ❤ by GitHub

The important parts to note in this code are the RowLimit element in the CAML query and the SP.ListItemCollection.get_listItemCollectionPosition(); property. Please have a look at the comments to know more details about the individual lines of code.

The ListItemCollectionPosition.pagingInfo determines the id of the last item fetched along with the filter and sorting criteria. It specifies information, as name-value pairs, required to get the next page of data for a list view.