SharePoint 2013: Custom or Advance Paging Using Client Object Model +jQuery

Note : This is article based on my original article at my blog
Custom paging is the main approach when you work with large data in SharePoint or any normal web site in ASP.NET even lists is using Paging,but the problem with paging is data itself .So if you have a large data you can end up with a lot of pages for example (10,20,30 and more).My approach is to develop custom paging but with out need to navigate between pages to get your data by using SharePoint 2010 +2013  Client Object Model + jQuery.

Advantages

The are many advantages of this Advance Custom paging as follow

• Work great with large lists because you do not need to navigate between pages.
• It’s JavaScript which means is client side ,so need for post back each unlike standard custom paging.
• Again it's JavaScript which will work great with **App SharePoint ** created by Napa office 365 development (no need for code behind)
• Clean HTML tags because I’m using Table- less table by using DIV tag

Demo

Click on image to see the result

Prerequisites

To run this code properly you need the following

• Create Custom List and name it “Products”
• Create New Column in Products list and name it Company,so you have now two column Title and Company
• Try to fill Products list with some data

How it work

• 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.

and here is the coed of this topic: 

<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()"  />

You can download the sample of this topic from the below link: http://code.msdn.microsoft.com/Advance-paging-in-81934f2b