Salesforce Pagination Lightning Component

05:42 29 Comments A+ a-

Hi All,
I have created a Pagination component which can be used as Lightning Component. This is very easy to setup and configure. You simply need to drag it in app builder and configure by giving objectname, fieldnames and the title of the pagination. By default it will fetch contact object and its by default giving fields.


For more information, watch it here -:

www.screencast.com

Unable to display content. Adobe Flash is required.

Here is the code:- 

Apex Controller:- 
public class PaginationController{ @AuraEnabled public static String getContacts(String objectName,String fieldName){ List<sObject> mylist = new List<sObject>(); String query = 'Select '; string fieldNames = queryableField(objectName, fieldName); if(string.isNotBlank(objectName) && string.isNotBlank(fieldNames)){ if(!new set<string>(new List<String>(fieldNames.split(','))).contains('Id')) query +='Id, '; query += fieldNames +' from '+objectName; }else if(string.isNotBlank(fieldNames)){ if(!new set<string>(new List<String>(fieldNames.split(','))).contains('Id')) query +='Id, '; query += fieldNames +' from contact'; } if(query != null) mylist = Database.query(query); if(mylist != null && mylist.size() > 0){ Map<String, Schema.SObjectField> FieldMap = Schema.getGlobalDescribe().get(string.valueOf(mylist.get(0).getSObjectType())).getDescribe().fields.getMap(); String jSon='['; String coma=''; List<string> field = fieldNames.split(','); for(sObject con : mylist) { jSon += '['; Integer i=0; for(string f : field){ if(i==0){ jSon += coma + '"<a target=\'_blank\' class=\'showDetail\' id=\''+con.get('Id')+'\' >' +con.get(f)+ '</a>",'; } else { jSon += coma + '"'+con.get(f)+'",'; } i++; } jSon += '],'; } jSon+=']'; return jSon; } else { return null; } } //function for return valid fields on basis of object and fields string. @AuraEnabled public static string queryableField(string objectString, string fieldString){ if((string.isBlank(objectString) && string.isBlank(fieldString)) || (string.isNotBlank(objectString) && string.isBlank(fieldString)) || string.isBlank(fieldString) ) return null; set<string> objectName = new set<string>(); for(string obj : Schema.getGlobalDescribe().keyset()) objectName.add(obj.toLowercase()); if(!objectName.contains(objectString.toLowercase())) return null; set<string> allFields = new set<string>(); set<string> validField = new set<string>(); Map<String, Schema.SObjectField> FieldMap; if(string.isNotBlank(objectString)) FieldMap = Schema.getGlobalDescribe().get(objectString).getDescribe().fields.getMap(); else FieldMap = Schema.getGlobalDescribe().get('contact').getDescribe().fields.getMap(); for(string field : FieldMap.keySet()){ allFields.add(FieldMap.get(field).getDescribe().getName().toLowercase()); } for(string f : fieldString.split(',')){ if(string.isNotBlank(f)){ if(allFields.contains(f.toLowercase())) validField.add(f.capitalize()); } } return string.join(new List<string>(validField),','); } }
 
Aura Controller:-  
({ doInit : function(component, event, helper) { var dataSet; var columns; var action = component.get("c.getContacts"); var action2 = component.get("c.queryableField"); var objectName = component.get("v.objectName"); var fieldName = component.get("v.fieldName"); var title = component.get("v.title"); component.set("v.title",title); var fields; var splitfileds; action.setParams({ "objectName":objectName, "fieldName":fieldName }) ; action2.setParams({ "objectString":objectName, "fieldString":fieldName }) ; var self = this; action2.setCallback(this,function(response){ var state = response.getState(); if(component.isValid() && state === "SUCCESS"){ fields = response.getReturnValue().split(","); var jSon='['; var coma=''; for(var i=0;i<fields.length;i++) { jSon+=coma+'{title:"'+fields[i]+'"}'; coma=','; } jSon+=']'; splitfileds = eval(jSon); } }); $A.enqueueAction(action2); action.setCallback(this,function(response){ var state = response.getState(); if(component.isValid() && state === "SUCCESS") { dataSet = eval(response.getReturnValue()); $(function(){ /* initiate the plugin */ $(window).resize(function(){ if ($(window).width() <= 700) { $('.container ').css({"overflow-x":"scroll","width":"100%"}); } else{ $('.container ').css({"overflow-x":"none","width":"100%"}); } }); var table = $('#example').DataTable({ data: dataSet, columns:splitfileds, "fnDrawCallback": function( oSettings ) { $('.showDetail').css({"cursor":"pointer","text-decoration":"none"}); $('.showDetail').click(function(){ var recordId = $(this).attr('id'); helper.navigateToDetailsView(recordId); }); } }); }); } }); $A.enqueueAction(action); } })

Aura Component:-
<aura:component controller="PaginationController" implements="flexipage:availableForAllPageTypes"> <ltng:require styles="/resource/bootstrap/css/datatable.css, /resource/bootstrap/css/mycss.css" scripts="/resource/bootstrap/js/jquery.js, /resource/bootstrap/js/datatable.min.js" afterScriptsLoaded="{!c.doInit}"/> <aura:attribute name="objectName" type="String" default="contact"/> <aura:attribute name="fieldName" type="String" default="name,id,email"/> <aura:attribute name="title" type="String" default="Pagination Table"/> <div class="container"> <h2>{!v.title}</h2> <br/> <table class="table table-bordered display" id="example"> </table> </div> </aura:component>

Aura Helper:-
({ navigateToDetailsView : function(accountId) { var event = $A.get("e.force:navigateToSObject"); event.setParams({ "recordId": accountId }); event.fire(); } })

Aura Application:-
<aura:application > <div class="container"> <c:dynamicPaginationForm /> </div> </aura:application>

Aura Design:- 
<design:component> <design:attribute name="objectName" label="Object Name"/> <design:attribute name="fieldName" label="Field Name"/> <design:attribute name="title" label="Title"/> </design:component>
Download static resource from here...
 
Copy the code and implement in your organization and if you face any issue, email me.
Provide your valuable feedback.


Thanks 
Sakib Beig 

Sakib beig

I’m a developer with 2 years of total experience. Having worked on diffrent softwares and websites.

I have worked in PHP , Salesforce , Asp.net , Bootstrap , Joomla , Wordpress , magento , Javascript and Jquery.


29 comments

Write comments
28 September 2015 at 06:58 delete

Nice work shakib sir keep it up !!!!!!

Reply
avatar
Sunil Sharma
AUTHOR
28 September 2015 at 21:49 delete

Nice :)

Thank you sir for this tutorial

Reply
avatar
28 September 2015 at 22:56 delete

Nice Paging with Bootstrap
Looking great :)

Reply
avatar
Unknown
AUTHOR
29 September 2015 at 06:14 delete

Great tutorial. Beneficial for all. Thanks

Reply
avatar
Rohit Sethi
AUTHOR
29 September 2015 at 08:37 delete

This really helps!
Thank you for sharing wonderful Tutorial.

Reply
avatar
Abbas Ali
AUTHOR
4 October 2015 at 22:38 delete

Really Helpful Thanks Sir

Reply
avatar
Unknown
AUTHOR
15 November 2015 at 22:26 delete

I am not able to download the static resource. Please help

Reply
avatar
Sakib Beig
AUTHOR
7 December 2015 at 22:40 delete

In last of demo you can see download static resource link from there you can download static resource

Reply
avatar
Roshan Baig
AUTHOR
13 January 2016 at 22:48 delete

Hi Sakib beig. Assalaam walaikum. The tutorial is really very good thanks a lot. I'm new to lighting component i need a small help from your side. I got a assignment where i should create a component in which i have only one picklist field on selecting the value different fields should render. I have already developed this in VF but they want it in lightning component. Please need some guidance

Reply
avatar
Unknown
AUTHOR
16 January 2016 at 03:17 delete

Hi Sakib Beig

Can you please attached the Static Resources ZIP file; because the download link is taken to your dev org, we don't have any credential for that.

Without those Static Resources I can't run this APP.

Appreciate your quick response.

Thanks

Reply
avatar
khubeb
AUTHOR
18 February 2016 at 02:37 delete

Static resources is not present in the link plz provide this link . ur link is not working thanks .

Reply
avatar
khubeb
AUTHOR
18 February 2016 at 03:06 delete This comment has been removed by the author.
avatar
khubeb
AUTHOR
18 February 2016 at 03:07 delete

Link is not working . please check or provide us the Js files its showing me asSorting in null

Reply
avatar
Unknown
AUTHOR
22 February 2016 at 20:54 delete

Unable to Download static resource..Please help.

Reply
avatar
Unknown
AUTHOR
22 February 2016 at 20:54 delete

Unable to Download static resource..Please help.

Reply
avatar
Unknown
AUTHOR
26 May 2016 at 12:46 delete

Thanks Sakib Beig for such great tutorial. We are unable to Download Static resource, please help me.
I really appreciate for your help, Thanks!!

Reply
avatar
Unknown
AUTHOR
21 July 2016 at 16:11 delete

hello, how can we get the static resource zip? i get a bootstrap text file but it isn't giving me all the different files referenced in the code. thank you!

Reply
avatar
Raj Solanki
AUTHOR
13 September 2016 at 06:11 delete

I pleased by reading this wonderful information. Thanks a lot for sharing amazing article on
Salesforce lightning Experience.

Reply
avatar
Mayukh
AUTHOR
17 November 2016 at 05:10 delete

Hi,
I am getting error in Error as :
in $A.getCallback() [eval is not a function]

Reply
avatar
Adarsh Sharma
AUTHOR
13 December 2016 at 01:48 delete

Hi,sakib
I'm also not able to download static resource.

Reply
avatar
Unknown
AUTHOR
18 May 2017 at 05:44 delete

Hi Sakib,
i'm getting the error like This page has an error. You might just need to refresh it.
Error in $A.getCallback() [eval is not a function]
Callback failed: apex://PaginationController_Aura/ACTION$queryableField
Failing descriptor: {markup://c:Custom_Pagination_Aura}..
please help me out

Reply
avatar
narasimharaju
AUTHOR
5 June 2017 at 01:04 delete

Hi Sakib,

Its a nice article. Appreciate if you can share the static resource since it is not downloadable now.

Reply
avatar
Ramanjulu P
AUTHOR
13 December 2017 at 01:49 delete This comment has been removed by the author.
avatar