SagarSfdc/PaginationScrolldown_Ext.cls

## Pagination_Scrolldown.Page
<!--
- This Visualforce Page is created for on scroll Pagination
- using PaginationScrolldown_Ext controller.
-
- @author       Sagar Sindhi
- @since        07.12.2018
- @revision     N/A
-
-->

<apex:page sidebar="false" controller="PaginationScrolldown_Ext">
	<!--  Jquery Script -->
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" />

	<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <!-- Import SLDS Style -->
            <apex:slds />
        </head>

        <body>
        	<div class="slds-scope" id="maindiv">

        		<!-- Page Header -->
        		<div class="slds-page-header">
					<div class="slds-page-header__row">
						<div class="slds-page-header__col-title">
							<div class="slds-media">
								<div class="slds-media__figure">
									<span class="slds-icon_container slds-icon-standard-account">
										<svg class="slds-icon slds-page-header__icon" aria-hidden="true">
											<use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
										</svg>
										<span class="slds-assistive-text">Account</span>
									</span>
								</div>
								<div class="slds-media__body">
									<div class="slds-page-header__name">
										<div class="slds-page-header__name-title">
											<h1>
												<span class="slds-page-header__title slds-truncate">All Accounts</span>
											</h1>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

        		<!-- Table div start -->
                <div style="height: 365px; overflow: auto;" class="slds-m-top_small" id="tbl">
                    <table class="slds-table slds-table_bordered slds-table_cell-buffer" role="grid" style="height: 5rem;">
                        <thead>
                            <tr class="slds-text-title_caps">
                                <th scope="col">
                                    <div class="slds-truncate" title="Account_Name">Account Name</div>
                                </th>

                                <th scope="col">
                                    <div class="slds-truncate" title="Account_Type">Account Type</div>
                                </th>

                                <th scope="col">
                                    <div class="slds-truncate" title="Industry">Industry</div>
                                </th>
                            </tr>
                        </thead>

                        <tbody id="tbodyid">

                        </tbody>
                    </table>
                </div>
                <!-- End of table div -->
       		</div>
        </body>
    </html>

    <script>

   	var offsetsize = 0;
    	var blocksize = 15;

    	$(document).ready(function()
        {
             getAccountsData(offsetsize,blocksize);
             $('#tbl').on('scroll', function() {
             	if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                     offsetsize = offsetsize + blocksize;
                     getAccountsData(offsetsize,blocksize);
                 }
             });

        });

        function getAccountsData(offsetsize,blocksize)
    	{
        	Visualforce.remoting.Manager.invokeAction(
        	'{!$RemoteAction.PaginationScrolldown_Ext.getAccounts}',
             offsetsize,blocksize,
             function(result, event) {
                if(event.status && result.length>0){
                    var markup = '';
                    for (var n=0; n<result.length; n++)
                    {
                        markup += '<tr id="tablerow-'+result[n].Id+'">'
                        +'<td data-label="Account_Name">'
                        +'<div>'+result[n].Name+'</div>'
                        +'</td>'
                        +'<td data-label="Account_Type">'
                        +'<div>'+result[n].Type+'</div>'
                        +'</td>'
                        +'<td data-label="Industry">'
                        +'<div>'+result[n].Industry+'</div>'
                        +'</td>'
                        +'</tr>';
                    }

                    $("#tbodyid").append(markup);
                }
                else if (event.type === 'exception') {
                	alert('Some Exception occur while getting the Accounts. Please ask your developer to verify the Same.');
                }
                else{
                    console.log('result : '+result);
                }
            });
    }
    </script>

</apex:page>

## PaginationScrolldown_Ext.cls
/**
* This Apex class is used for bussiness logic
* with Pagination_Scrolldown Visualforce Page.
*
* @author       Sagar Sindhi
* @since        07.12.2018
* @revision     N/A
*
**/

public with sharing class PaginationScrolldown_Ext {

    @RemoteAction
    public static List<Account> getAccounts(Integer offsetindex,Integer blockrcdSize)
    {
        List<Account> AllAcct = new List<Account>();
        try
        {
        	AllAcct = Database.Query('SELECT Id,Name,Type,Industry FROM Account Order BY Name ASC Limit :blockrcdSize OFFSET :offsetindex');
        }
        catch(Exception ex)
        {
            System.debug(ex.getMessage()+' :::: line number :: '+ex.getLineNumber());
        }
        return AllAcct;
    }
}
	<!--
	- This Visualforce Page is created for on scroll Pagination
	- using PaginationScrolldown_Ext controller.
	-
	- @author Sagar Sindhi
	- @since 07.12.2018
	- @revision N/A
	-
	-->

	<apex:page sidebar="false" controller="PaginationScrolldown_Ext">
	<!-- Jquery Script -->
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" />

	<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
	<head>
	<!-- Import SLDS Style -->
	<apex:slds />
	</head>

	<body>
	<div class="slds-scope" id="maindiv">

	<!-- Page Header -->
	<div class="slds-page-header">
	<div class="slds-page-header__row">
	<div class="slds-page-header__col-title">
	<div class="slds-media">
	<div class="slds-media__figure">
	<span class="slds-icon_container slds-icon-standard-account">
	<svg class="slds-icon slds-page-header__icon" aria-hidden="true">
	<use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
	</svg>
	<span class="slds-assistive-text">Account</span>
	</span>
	</div>
	<div class="slds-media__body">
	<div class="slds-page-header__name">
	<div class="slds-page-header__name-title">
	<h1>
	<span class="slds-page-header__title slds-truncate">All Accounts</span>
	</h1>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Table div start -->
	<div style="height: 365px; overflow: auto;" class="slds-m-top_small" id="tbl">
	<table class="slds-table slds-table_bordered slds-table_cell-buffer" role="grid" style="height: 5rem;">
	<thead>
	<tr class="slds-text-title_caps">
	<th scope="col">
	<div class="slds-truncate" title="Account_Name">Account Name</div>
	</th>

	<th scope="col">
	<div class="slds-truncate" title="Account_Type">Account Type</div>
	</th>

	<th scope="col">
	<div class="slds-truncate" title="Industry">Industry</div>
	</th>
	</tr>
	</thead>

	<tbody id="tbodyid">

	</tbody>
	</table>
	</div>
	<!-- End of table div -->
	</div>
	</body>
	</html>

	<script>

	var offsetsize = 0;
	var blocksize = 15;

	$(document).ready(function()
	{
	getAccountsData(offsetsize,blocksize);
	$('#tbl').on('scroll', function() {
	if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
	offsetsize = offsetsize + blocksize;
	getAccountsData(offsetsize,blocksize);
	}
	});

	});

	function getAccountsData(offsetsize,blocksize)
	{
	Visualforce.remoting.Manager.invokeAction(
	'{!$RemoteAction.PaginationScrolldown_Ext.getAccounts}',
	offsetsize,blocksize,
	function(result, event) {
	if(event.status && result.length>0){
	var markup = '';
	for (var n=0; n<result.length; n++)
	{
	markup += '<tr id="tablerow-'+result[n].Id+'">'
	+'<td data-label="Account_Name">'
	+'<div>'+result[n].Name+'</div>'
	+'</td>'
	+'<td data-label="Account_Type">'
	+'<div>'+result[n].Type+'</div>'
	+'</td>'
	+'<td data-label="Industry">'
	+'<div>'+result[n].Industry+'</div>'
	+'</td>'
	+'</tr>';
	}

	$("#tbodyid").append(markup);
	}
	else if (event.type === 'exception') {
	alert('Some Exception occur while getting the Accounts. Please ask your developer to verify the Same.');
	}
	else{
	console.log('result : '+result);
	}
	});
	}
	</script>

	</apex:page>
	/**
	* This Apex class is used for bussiness logic
	* with Pagination_Scrolldown Visualforce Page.
	*
	* @author Sagar Sindhi
	* @since 07.12.2018
	* @revision N/A
	*
	**/

	public with sharing class PaginationScrolldown_Ext {

	@RemoteAction
	public static List<Account> getAccounts(Integer offsetindex,Integer blockrcdSize)
	{
	List<Account> AllAcct = new List<Account>();
	try
	{
	AllAcct = Database.Query('SELECT Id,Name,Type,Industry FROM Account Order BY Name ASC Limit :blockrcdSize OFFSET :offsetindex');
	}
	catch(Exception ex)
	{
	System.debug(ex.getMessage()+' :::: line number :: '+ex.getLineNumber());
	}
	return AllAcct;
	}
	}