The are many advantages of this Advance Custom paging as follow
Click on image to see the result
To run this code properly you need the following
The idea is sample ,you just need to work with SharePoint Client Object Model but the most important thing to note is ListItemCollectionPosition and row limit as well.
<script> var listItems; var query; var targetList; var clientContext; var firstRow = true; function runCode() { $('#divPostsLoader').html('<img src="../../../_layouts/Images/AdvancePaging/ajax-loader.gif">'); clientContext = new SP.ClientContext(); targetList = clientContext.get_web().get_lists().getByTitle('Products'); query = new SP.CamlQuery(); var RowCount = 3; //Specifying the RowLimit will determine how many items will be fetched in one call to the server. query.set_viewXml("<View><RowLimit>"+RowCount+"</RowLimit></View>"); listItems = targetList.getItems(query); clientContext.load(listItems); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded() { var title, company; var listEnumerator = listItems.getEnumerator(); //Create Header $("#Result").append("<div class='div-table-row'><div class='div-table-col'>Title</div><div class='div-table-col'>Name</div>"); $("#divPostsLoader").empty(); while (listEnumerator.moveNext()) { title = listEnumerator.get_current().get_item("Title"); company = listEnumerator.get_current().get_item("Company"); $('#Result').append("<div class='div-table-row'>"); $('#Result').append("<div class='div-table-col'>" + title + "</div><div class='div-table-col'>" + company + "</div>"); $('#Result').append("</div>"); } } 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"); function loadMoreData() { $('#divPostsLoader').html('<img src="../../../_layouts/Images/AdvancePaging/ajax-loader.gif">'); //Gets the id of the last element from the returned collection along with the query. var position = listItems.get_listItemCollectionPosition(); if (position != null) { $("#LoadBtn").attr("disabled", "disabled"); query.set_listItemCollectionPosition(position); listItems = targetList.getItems(query); clientContext.load(listItems); //Call the other function to load data from list clientContext.executeQueryAsync(Function.createDelegate(this, this.onLoadQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } else { $('#divPostsLoader').empty(); $("#LoadBtn").attr("value", "No more data found"); $("#LoadBtn").attr("disabled", "disabled"); } } function onLoadQuerySucceeded() { var title, company; var listEnumerator = listItems.getEnumerator(); while (listEnumerator.moveNext()) { title = listEnumerator.get_current().get_item("Title"); company = listEnumerator.get_current().get_item("Company"); $("#divPostsLoader").empty(); $('#Result').append("<div class='div-table-row'>"); $('#Result').append("<div class='div-table-col'>" + title + "</div><div class='div-table-col'>" + company + "</div>"); $('#Result').append("</div>"); } $("#LoadBtn").removeAttr("disabled"); } </script> ///Inside Body<div id="Result"> </div> <div id="divPostsLoader" ></div> <br /> <input id="LoadBtn" type="button" value="Load data" onclick="return loadMoreData()" />
<
script
> var listItems;
var query;
var targetList;
var clientContext;
var firstRow = true;
function runCode() {
$('#divPostsLoader').html('<
img
src
=
"../../../_layouts/Images/AdvancePaging/ajax-loader.gif"
>');
clientContext = new SP.ClientContext();
targetList = clientContext.get_web().get_lists().getByTitle('Products');
query = new SP.CamlQuery();
var RowCount = 3;
//Specifying the RowLimit will determine how many items will be fetched in one call to the server.
query.set_viewXml("<
View
><
RowLimit
>"+RowCount+"</
></
>");
listItems = targetList.getItems(query);
clientContext.load(listItems);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
var title, company;
var listEnumerator = listItems.getEnumerator();
//Create Header
$("#Result").append("<
div
class
'div-table-row'
'div-table-col'
>Title</
>Name</
$("#divPostsLoader").empty();
while (listEnumerator.moveNext()) {
title = listEnumerator.get_current().get_item("Title");
company = listEnumerator.get_current().get_item("Company");
$('#Result').append("<
>" + title + "</
>" + company + "</
$('#Result').append("</
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");
function loadMoreData() {
//Gets the id of the last element from the returned collection along with the query.
var position = listItems.get_listItemCollectionPosition();
if (position != null) {
$("#LoadBtn").attr("disabled", "disabled");
query.set_listItemCollectionPosition(position);
//Call the other function to load data from list
clientContext.executeQueryAsync(Function.createDelegate(this, this.onLoadQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
else {
$('#divPostsLoader').empty();
$("#LoadBtn").attr("value", "No more data found");
function onLoadQuerySucceeded() {
$("#LoadBtn").removeAttr("disabled");
</
>
///Inside Body
id
"Result"
"divPostsLoader"
br
/>
input
"LoadBtn"
type
"button"
value
"Load data"
onclick
"return loadMoreData()"