Scolldown Pagination in Visualforce Page

First of all, most important thing to know what is pagination?

Why we use it???

Most of the developers know about this but if you are beginner or do not know about pagination here is the explanation.

Pagination is used to display or handle the large number of sobject records and breaking the large number of records into the separate pages for viewing with in the salesforce so that you can improve the visualforce page or lightning component load times.

Pagination can be done using multiple ways.

  1. Pagination with a Standard Set Controller
  2. Pagination with a SOQL OFFSET in Apex

If you are dealing with limited records like upto 2,000 then you can use SOQL Offset in custom controller and display in visualforce using next and previous buttons or scrollbar.

But if you have requirement for more than 2,000 records then you can use Standard Set Controller and paginate records upto 10,000.

You can set any number of sobject records like 20,25 or any other number per page with the help of pagination.

In the article I am going to explain pagination using SOQL Offset in custom apex controller and display records in visualforce with the help of visualforce remoting and jquery.

This will also help you to understand some basic concepts of visualforce remoting and jquery.

So we have talked too much now It’s time for some code.


– 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="; />
<html xmlns="; xmlns:xlink="; lang="en">
<!– Import SLDS Style –>
<apex:slds />
<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>
<span class="slds-assistive-text">Account</span>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<span class="slds-page-header__title slds-truncate">All Accounts</span>
<!– 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;">
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="Account_Name">Account Name</div>
<th scope="col">
<div class="slds-truncate" title="Account_Type">Account Type</div>
<th scope="col">
<div class="slds-truncate" title="Industry">Industry</div>
<tbody id="tbodyid">
<!– End of table div –>
var offsetsize = 0;
var blocksize = 15;
$('#tbl').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
offsetsize = offsetsize + blocksize;
function getAccountsData(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">'
+'<td data-label="Account_Type">'
+'<td data-label="Industry">'
else if (event.type === 'exception') {
alert('Some Exception occur while getting the Accounts. Please ask your developer to verify the Same.');
console.log('result : '+result);

* 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 {
public static List<Account> getAccounts(Integer offsetindex,Integer blockrcdSize)
List<Account> AllAcct = new List<Account>();
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;

As you can see 15 Account (sobject) records per page is displaying using SOQL Offset.

Some pointers related to above visualforce page and apex controller which  would be helpful to understand.

  1. getAccountsData() is the javascript function which is calling initially on load of page for getting first 15 records or when user reaches the end of page for getting the further 15 records from server side.
  2. scrollTop() is the javascript property which returns the number of pixels an element content is scrolled vertically.
  3. innerHeight() is the javascript property which returns the height of window’s content area.
  4. scrollHeight() is javascript property which returns the entire height of element including padding.

Refer Below Links for some more details of Pagination.

Hope you find this helpful, in case of any queries/concerns, please post a reply or drop an email to me at .