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

Salesforce Lightning Web Components Overview

What are Lightning Web Components(LWC)? Lightning web components are custom HTML elements built using HTML and modern JavaScript.  Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components.   Why we need to go for LWC? 1. It uses Core Web Components standards 2. Most of the code you write is standard JavaScript and HTML 3. Provides only what’s necessary to perform 4. It is built on code that runs natively in browsers 5. It is lightweight and delivers exceptional performance   Where can we implement LWC Components? Salesforce Developer Console won’t support LWC components. We need to install Visual Studio Code(VS Code) Editor to implement the LWC Components. LWC Component Bundle Structure: LWC Majorly contains 3 files HTML JavaScript Meta XML Naming Convention/Rules for Components Bundles 1.Component name Must begin with a lowercase letter 2.Name ...
Post a Comment
Read more

Salesforce Lightning Data Service

In this blog, Today we can learn about the Lightning Data Service. What  is Lightning Data Service? Why  to use Lightning Data Service? When  to use Lightning Data Service? Which  Lightning Data Service to use? What is Lightning Data Service? Lightning Data Service is centralized data caching framework, which is use to load, create, update and delete the data in Salesforce without Salesforce Server side Apex Code. Why to use Lightning Data Service? Below are the few reasons of using Lightning Data Service in Lightning Web Component: No need of additional apex code to get data by making additional server side call. Lightning Data Service supports Sharing Rule and Field Level Security. Because of not writing additional Apex Class code, it will improve component's performance. It cache the result locally on Client Side. It supports all standard and custom Objects of Salesforce. When to use Lightning Data Service? Below are the scenarios when we can use Lightni...
Post a Comment
Read more

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