Skip to content

Instantly share code, notes, and snippets.

@Avinava
Created October 21, 2014 10:52
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Avinava/3787c1641a65b0b1a135 to your computer and use it in GitHub Desktop.
Save Avinava/3787c1641a65b0b1a135 to your computer and use it in GitHub Desktop.
Display more than 1K Records Using JSRemoting with JSRender
<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>
public class PBE1KRemoting_Con {
@RemoteAction
public static List<Contact> getContacts(){
return [SELECT Name,FirstName,LastName,Phone,Email FROM Contact];
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment