Showing more than 1K records using PBE - Part 1 Remoting

I have got this question several times from emails, to tweets and from lots of comments in blogs that "How can show more than 1000 records in table show that I can do more with PBE". PBE does add a lot of client side features like sorting, export, pagination etc but totally rely on data on the page to make it work, it cannot bring data from controller. So we need to bring as much as data we can to the page but to do this we need to overcome the 1K limit of list on VF.

If you haven't read about PBE (Pageblock table enhancer) you can read it here

So how can we overcome the 1K limit of list in VF pages ? 

There are basically two ways

• JSRemoting : Use remoting and templating library like JSRender to create a table and initialize PBE on the same. I did a small blog on something very similar where you can display records using Remote objects, but for this we need to replace the data source from remoteobjects to remoting because 100records query limit
• Using List<List<T>> : This is complete VF approach where we try to replicate the structure of pageblock table using apex:repeats.

JS Remoting

Pros

• Very fast and lightweight
• Can bring upto 15mb data
• No overhead of viewstate
• Ideal for showing long list of data

There is no better way to explain then jumping into the code.

	<apex:page controller="PBE1KRemoting_Con">
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
	<apex:includeScript value="https://rawgithub.com/BorisMoore/jsrender/master/jsrender.min.js"/>
	<script>
	function getContacts(callback){
	Visualforce.remoting.Manager.invokeAction(
	'{!$RemoteAction.PBE1KRemoting_Con.getContacts}',
	function(result, event){
	callback(result);
	},
	{escape: false}
	);
	}
	//on document ready call query and render the template
	$(function(){
	getContacts(function(result){
	var html = $("#contactTableRowTmpl").render(result);
	//replace the table body with rendered html
	$("#contactTableBody").html(html);
	initPageBlockTableEnhancerADV();
	});
	})
	</script>
	<!-- JS Render Template -->
	<script id="contactTableRowTmpl" type="text/x-jsrender">
	<tr class="dataRow" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
	<td class="dataCell">{{>Name}}</td>
	<td class="dataCell">{{>FirstName}}</td>
	<td class="dataCell">{{>LastName}}</td>
	<td class="dataCell">{{>Phone}}</td>
	<td class="dataCell">{{>Email}}</td>
	</tr>
	</script>
	<pbe:PageBlockTableEnhancerADV targetPbTableIds="contactsTable"/>
	<apex:pageBlock >
	<apex:sectionHeader title="Display more than 1K Records" subtitle="Using JSRemoting with JSRender"/>
	<!-- Borrow some styling from Pageblock table -->
	<table class="list" border="0" cellpadding="0" cellspacing="0" id="contactsTable">
	<thead class="rich-table-thead">
	<tr class="headerRow ">
	<th class="headerRow">Name</th>
	<th class="headerRow">FirstName</th>
	<th class="headerRow">LastName</th>
	<th class="headerRow">Phone</th>
	<th class="headerRow">Email</th>
	</tr>
	</thead>
	<tbody id="contactTableBody">
	</tbody>
	</table>
	</apex:pageBlock>
	</apex:page>

view raw PBE1KRemoting.page hosted with ❤ by GitHub

	public class PBE1KRemoting_Con {
	@RemoteAction
	public static List<Contact> getContacts(){
	return [SELECT Name,FirstName,LastName,Phone,Email FROM Contact];
	}
	}

view raw PBE1KRemoting_Con.cls hosted with ❤ by GitHub

How it works ?

1. The page loads and brings data using Remoting method "getContacts"
2. Once data is available the data is converted into HTML using JSrender and HTML template that is defined
3. After load we call the initPageBlockTableEnhancerADV method to init PageblockEnahncer which reinitializes  the PBE

Screenshot

Demo

http://blogforce9dev-developer-edition.ap1.force.com/PBE1kRemoting

Find PageblockEhancer on Appexchange by clicking on this link