Skip to main content

Client Side Pagination using Lightning Component


This post describes, how to show Pagination on Lightning Datatable using reusable client side lightning pagination component. Pagination component is a reusable component and can be used any where using data table by passing two input parameters
currentPageNumber
maxPageNumber


Below are the steps to create a component to display the List of contacts and can able to paginate based on the records per page selection.

Step 1: Create a Pagination Component(Pagination.cmp)
Copy the below code to Pagination.cmp file
https://github.com/NagarjunaKaipu/myLightning/blob/master/ContactListDisplay.cmp

Copy the below js code to PaginationController.js file
https://github.com/NagarjunaKaipu/myLightning/blob/master/PaginationController.js

Step 2: Create Contact List component(ContactList.cmp)
Copy the below code to ContactList.cmp file
https://github.com/NagarjunaKaipu/myLightning/blob/master/ContactList.cmp

Copy the below js code to ContactListController.js file
https://github.com/NagarjunaKaipu/myLightning/blob/master/ContactListController.js

Step 3:
Test the component using Lightning Test Application(Test.app)


   


Sample Output:


Labels:

Comments

Post a Comment

Popular posts from this blog

Get started with Simple Lightning Web Component(Bike Card)

Lightning web component HTML files all include the template tag. The template tag contains the HTML that defines the structure of your component. Let’s look at the HTML for a simplified version of the component. Paste the following into app.html (replacing any existing HTML in the file). bikeCard.html < template > < div id = "waiting" if : false = { ready } > Loading.. </ div > < div id = "dispaly" if : true = { ready } > < div > Name: {name} </ div > < div > Description: {description} </ div > < div > Category: {category} </ div > < div > Material: {material} </ div > < div > Price: {price} </ div > < div >< img src = { pictureURL } /></ div > </ div > </ template > The identifiers in the curly braces {} are bound to the fields of the same name in the corresponding JavaScript class. Here’s a JavaScript file to s...
Post a Comment
Read more

Disable Document Download in Salesforce

Disable downloads for certain users based on the name of the file uploaded to Salesforce. We can use the following example code inside of a Apex class. This code essentially prevents files whose file name starts off with Kaipu- from being downloaded by anyone whose user role’s developer name is not Kaipu_Sales. Modify this code to suit your own purpose. Based on Role: public class ContentDownloadHandlerFactoryImpl implements Sfc.ContentDownloadHandlerFactory {    public Sfc.ContentDownloadHandler getContentDownloadHandler(List<ID> ids, Sfc.ContentDownloadContext context) {      // See if the user has the Kaipu Sales role (based on developer name field).      Boolean isSecretUser = [        SELECT Id        FROM UserRole        WHERE ID = :UserInfo.getUserRoleId()          AND DeveloperName = ' Kaip...
Post a Comment
Read more

Commonly asked Lightning Developer Interview Questions & Answers

1. Where can we use Lightning Components? We can use Lightning Components in the following places: Drag-and-drop Components in the Lightning App Builder and Community Builder. Add Lightning Components to Lightning Pages. Add Lightning Components to Lightning Experience Record Pages. Launch a Lightning Component as a Quick Action Override Standard Actions with Lightning Components Create Stand-Alone Apps 2. How do you build Lightning Components? We can build Lightning Components using two programming models: the Lightning Web Components model, and the original Aura Components model. 3. How can you create Lightning Record Pages in Salesforce, and what are the different types? We can make use of Lightning App Builder for creating Lightning Record Pages, to create the following three types of pages: App Page Home Page Record Page 4. What options are there for Lightning Record Page assignment? “Lightning Pages” can be assigned at three different levels: The org default App default – this ov...
Post a Comment
Read more