Paging in list items using javascript object model in SharePoint 2013

Paging can be useful when you want to improve the performance of page. Using javascript object model, you can implement the paging in apps or in any custom page. Below is the example of paging with page size 2 and paging can be perform by Load more button.

Html code to be added in web page.

 <div id="divMain"></div>  
 <input id="btnMore" type="button" value="Load More" onclick="LoadMore()"></input>  

Javascript code to perform paging using javascipt object model and jQuery

 var context;  
 var oList;  
 var oListItems;  
 var query;  
 jQuery(function($) {  
       var scriptbase = _spPageContextInfo.webServerRelativeUrl + "_layouts/15/";   
      $.getScript(scriptbase + "SP.js", GetListItems);  
 });  
 function GetListItems() {  
   context = SP.ClientContext.get_current();  
   oList = context.get_web().get_lists().getByTitle('Colors');  
   query = new SP.CamlQuery();  
   //Do specify the row limit  
   query.set_viewXml("<View><ViewFields><FieldRef Name='Title'/></ViewFields><RowLimit>2</RowLimit></View>");  
   oListItems = oList.getItems(query);  
   context.load(oListItems);  
   context.executeQueryAsync(onQuerySucceeded,onQueryFailed);  
 }  
 function onQuerySucceeded() {  
   var listEnumerator = oListItems.getEnumerator();  
   var message="";  
   while (listEnumerator.moveNext()) {  
      message+=listEnumerator.get_current().get_item("Title")+"<br/>";  
    }  
    $("#divMain").append(message);  
       var position = oListItems.get_listItemCollectionPosition();  
       if (position == null)  
       {  
            $("#btnMore").hide();  
       }  
 }  
 function onQueryFailed(sender, args) {  
   alert('Error: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());  
 }  
 function LoadMore()  
 {  
       //Get the id of the last item with paging info  
       var position = oListItems.get_listItemCollectionPosition();  
   //If no items present, position will be null  
   if (position != null) {  
     query.set_listItemCollectionPosition(position);  
     oListItems = oList.getItems(query);  
        context.load(oListItems);  
        context.executeQueryAsync(onQuerySucceeded,onQueryFailed);  
   }   
 }  
   

Below is the result of paging with 5 items (page size=2)