{"id":64548,"date":"2016-11-16T07:46:27","date_gmt":"2016-11-16T07:46:27","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=64548"},"modified":"2018-01-16T07:03:05","modified_gmt":"2018-01-16T07:03:05","slug":"pagination-in-lightning-component","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/","title":{"rendered":"Pagination in lightning component Salesforce"},"content":{"rendered":"

In this blog we will learn the implementation of pagination in lightning component, with the use of lightning bundle.<\/p>\n

\n
\n

Pagination in Lightning Component<\/h3>\n<\/div>\n
\n

Goto Setup\u00a0>\u00a0Develop\u00a0>\u00a0Apex Classes\u00a0>\u00a0New<\/strong><\/p>\n

Write the following code in Apex Class:<\/p>\n

Apex Controller-<\/p>\n

public with sharing class pagination {\r\n\r\n    \/**\r\n     * Webkul Software.\r\n     *\r\n     * @category  Webkul\r\n     * @author    Webkul\r\n     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n     * @license   https:\/\/store.webkul.com\/license.html\r\n     *\/\r\n     \r\n     @AuraEnabled\r\n     public list<account> acc;\r\n     \r\n     @AuraEnabled \r\n     public integer offst;\r\n     \r\n     @AuraEnabled \r\n     public integer total;\r\n     \r\n     @AuraEnabled \r\n     public boolean hasprev;\r\n     \r\n     @AuraEnabled \r\n     public boolean hasnext;\r\n\r\n     private static integer pagesize=8;\r\n     private static integer offset;\r\n     \r\n     @AuraEnabled\r\n     public static pagination getacc(boolean next,boolean prev,decimal off){\r\n        offset = (integer)off;\r\n        list<account> li = new list<account>();\r\n        integer listlength = [Select count() from account where name!=null];\r\n        if(!schema.sobjecttype.Account.isaccessible()){\r\n            li = new list<account>();\r\n        }else{\r\n         if(next==false && prev==false){\r\n         li = [Select id,name,accountSource,AccountNumber,Active__c from account LIMIT :pagesize OFFSET :offset];\r\n         }else if(next==true && (offset+pagesize)<=listlength){\r\n              offset=offset+pagesize;\r\n          li = [Select id,name,accountSource,AccountNumber,Active__c from account LIMIT :pagesize OFFSET :offset];\r\n         }else if(prev==true && offset>0){\r\n          offset=offset-pagesize;\r\n          li = [Select id,name,accountSource,AccountNumber,Active__c from account LIMIT :pagesize OFFSET :offset];\r\n         }\r\n         }\r\n        pagination pg = new pagination();\r\n        pg.acc = li;\r\n        pg.offst = offset;\r\n        pg.hasprev = hasprev(offset);   \r\n            pg.hasnext = hasnxt(offset,listlength,pagesize);\r\n            \r\n            return pg;\r\n         }\r\n         \r\n         private static boolean hasprev(integer off){\r\n            if(off>0)\r\n                return false;\r\n            return true; \r\n        }\r\n        private static boolean hasnxt(integer off,integer li,integer ps){\r\n        if(off+ps<li)\r\n            return false;\r\n        return true;\r\n    }    \r\n}<\/pre>\n
Open Devloper Console.<\/strong><\/p>\n
\"pagination<\/a><\/p>\n
Create New Lightning Component for SVG. Go to File > New > Lightning Component<\/strong>. Name it SVG<\/strong> and write the following code:<\/p>\n
<aura:component implements=\"force:appHostable\"><!--implements=\"force:appHostable\" allows to create lightning tabs-->\r\n\r\n    <!-- \r\n    \/**\r\n     * Webkul Software.\r\n     *\r\n     * @category  Webkul\r\n     * @author    Webkul\r\n     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n     * @license   https:\/\/store.webkul.com\/license.html\r\n     *\/\r\n     -->\r\n\r\n    <aura:attribute name=\"class\" type=\"String\" description=\"CSS classname for the SVG element\" \/>\r\n    <aura:attribute name=\"xlinkHref\" type=\"String\" description=\"SLDS icon path. Ex: \/assets\/icons\/utility-sprite\/svg\/symbols.svg#download\" \/>\r\n    <aura:attribute name=\"ariaHidden\" type=\"String\" default=\"true\" description=\"aria-hidden true or false. defaults to true\" \/>\r\n    \r\n<\/aura:component><\/pre>\n
Now refer to right side of the column click Renderer<\/strong>. \"Renderer\"<\/a>Write the following code:<\/p>\n
({\r\n\r\n    \/**\r\n     * Webkul Software.\r\n     *\r\n     * @category  Webkul\r\n     * @author    Webkul\r\n     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n     * @license   https:\/\/store.webkul.com\/license.html\r\n     *\/\r\n\r\n    render: function(component, helper) {\r\n        \/\/grab attributes from the component markup\r\n        var classname = component.get(\"v.class\");\r\n        var xlinkhref = component.get(\"v.xlinkHref\");\r\n        var ariaHidden = component.get(\"v.ariaHidden\");\r\n        \/\/return an svg element w\/ the attributes\r\n        var svg = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"svg\");\r\n        svg.setAttribute('class', classname);\r\n        svg.setAttribute('aria-hidden', ariaHidden);\r\n        svg.innerHTML = '<use xlink:href=\"'+xlinkhref+'\"><\/use>';\r\n        return svg;\r\n    }\r\n})\r\n<\/pre>\n
You can now use the SVG component wherever you need.<\/p>\n
Create a new lightning Component. File > New > Lightning Component<\/strong><\/p>\n
Write the following Code in the Component:<\/p>\n
Component-<\/p>\n
<aura:component controller=\"pagination\">\r\n\r\n    <!-- \r\n    \/**\r\n     * Webkul Software.\r\n     *\r\n     * @category  Webkul\r\n     * @author    Webkul\r\n     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n     * @license   https:\/\/store.webkul.com\/license.html\r\n     *\/\r\n     -->\r\n\r\n    <ltng:require styles=\"{!$Resource.SLDS +\r\n             '\/assets\/styles\/salesforce-lightning-design-system-ltng.css'}\" \/>\r\n    <aura:attribute name=\"accounts\" type=\"Account[]\"\/>\r\n    <aura:handler name=\"init\" value=\"{!this}\" action=\"{!c.getAccounts}\" \/>\r\n    \r\n    <aura:attribute name=\"offset\" type=\"integer\" \/>\r\n    \r\n    <aura:attribute name=\"next\" type=\"boolean\" \/>\r\n    <aura:attribute name=\"prev\" type=\"boolean\" \/>\r\n\r\n    <div class=\"wk_static\">\r\n        <div class=\"slds-page-header\" role=\"banner\">\r\n            <div class=\"slds-grid\">\r\n                <div class=\"slds-col slds-has-flexi-truncate\">\r\n                    <div class=\"slds-media slds-media--center slds-no-space slds-grow\">\r\n                        <div class=\"slds-media__figure\">\r\n                            <span class=\"slds-icon_container slds-icon-standard-account\">\r\n                                <c:SVG class=\"slds-icon\" xlinkHref=\"\/resource\/SLDS\/assets\/icons\/standard-sprite\/svg\/symbols.svg#account\" \/>\r\n                                <span class=\"slds-assistive-text\">Account Icon<\/span>\r\n                            <\/span>\r\n                        <\/div>\r\n                        <div class=\"slds-media__body\">\r\n                            <h1 class=\"slds-page-header__title slds-m-right--small slds-truncate slds-align-middle\" title=\"Accounts\">Accounts<\/h1>\r\n                        <\/div>\r\n                    <\/div>                    \r\n                <\/div>                \r\n            <\/div>\r\n        <\/div>\r\n        <table class=\"slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal\"><!--Table must be responsive-->\r\n            <thead>\r\n                <tr class=\"slds-text-heading--label \">                    \r\n                    <th class=\"\" scope=\"col\">Account Name<\/th>                    \r\n                    <th class=\"slds-is-sortable\" scope=\"col\">Account Number<\/th>\r\n                    <th class=\"slds-is-sortable\" scope=\"col\">Account Source<\/th>\r\n                    <th class=\"slds-is-sortable\" scope=\"col\">Active<\/th>           \r\n                <\/tr>  \r\n            <\/thead>\r\n            <tbody>\r\n                <aura:iteration items=\"{!v.accounts}\" var=\"account\">\r\n                    <tr class=\"slds-hint-parent\">                        \r\n                        <td data-label=\"Account Name\" >\r\n                            <a href=\"{! '#\/sObject\/' + account.Id + '\/view'}\">{!account.Name}<\/a>\r\n                        <\/td>\r\n                        <td data-label=\"Account Number\" >{!account.AccountNumber}<\/td>\r\n                        <td data-label=\"Account Source\" >{!account.AccountSource}<\/td>\r\n                        <td data-label=\"Active\">{!account.Active__c}<\/td>\r\n                    <\/tr>\r\n                <\/aura:iteration>\r\n            <\/tbody>\r\n        <\/table>\r\n        <ui:button class=\"slds-button slds-button--neutral slds-p-horizontal--xx-small slds-m-right--x-small slds-float--right\" press=\"{!c.Next}\" disabled=\"{!v.next}\" >\r\n            <span class=\"slds-icon slds-icon-text-default\">\r\n                <c:SVG class=\"slds-button__icon slds-button__icon--large\" xlinkHref=\"\/resource\/SLDS\/assets\/icons\/utility-sprite\/svg\/symbols.svg#chevronright\" \/>\r\n                <span class=\"slds-assistive-text\">Next<\/span>\r\n            <\/span>                 \r\n        <\/ui:button>\r\n        <ui:button class=\"slds-button slds-button--neutral slds-p-horizontal--xx-small slds-m-right--x-small slds-float--right\" press=\"{!c.Previous}\" disabled=\"{!v.prev}\">\r\n            <span class=\"slds-icon slds-icon-text-default\">\r\n                <c:SVG class=\"slds-button__icon slds-button__icon--large\" xlinkHref=\"\/resource\/SLDS\/assets\/icons\/utility-sprite\/svg\/symbols.svg#chevronleft\" \/>\r\n                <span class=\"slds-assistive-text\">Previous<\/span>\r\n            <\/span>               \r\n        <\/ui:button> \r\n    <\/div>\r\n<\/aura:component><\/pre>\n
Client-Side Controller-<\/p>\n
({\r\n    \/**\r\n    * Webkul Software.\r\n    *\r\n    * @category  Webkul\r\n    * @author    Webkul\r\n    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n    * @license   https:\/\/store.webkul.com\/license.html\r\n    *\/\r\n\r\n    getAccounts : function(cmp, evt, helper) {\r\n        var next = false;\r\n        var prev = false;\r\n        helper.getAccounts(cmp,next,prev);\r\n    },\r\n    Next:function(cmp,event,helper){\r\n        var next = true;\r\n        var prev = false;\r\n        var offset = cmp.get(\"v.offset\");\r\n        helper.getAccounts(cmp,next,prev,offset); \r\n    },\r\n    Previous:function(cmp,event,helper){\r\n        var next = false;\r\n        var prev = true;\r\n        var offset = cmp.get(\"v.offset\");\r\n        helper.getAccounts(cmp,next,prev,offset); \r\n    },\r\n})<\/pre>\n
Helper-<\/p>\n
({\r\n    \/**\r\n    * Webkul Software.\r\n    *\r\n    * @category  Webkul\r\n    * @author    Webkul\r\n    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n    * @license   https:\/\/store.webkul.com\/license.html\r\n    *\/\r\n\r\n    getAccounts : function(cmp,next,prev,offset) {\r\n        offset = offset || 0;\r\n        var action = cmp.get(\"c.getacc\");\r\n        action.setParams({\r\n            \"next\" : next,\r\n            \"prev\" : prev,\r\n            \"off\" : offset            \r\n        });\r\n        action.setCallback(this,function(res){\r\n            var state = res.getState();            \r\n            if(state==\"SUCCESS\"){\r\n              var result = res.getReturnValue();\r\n              cmp.set('v.offset',result.offst);\r\n              cmp.set('v.accounts',result.acc);\r\n              cmp.set('v.next',result.hasnext);\r\n              cmp.set('v.prev',result.hasprev);\r\n            }\r\n        });        \r\n        $A.enqueueAction(action);\r\n    }\r\n})<\/pre>\n<\/div>\n<\/div>\n
\n
\n
Output<\/h3>\n<\/div>\n
\n
Here is the output:<\/p>\n
\"output\"<\/a><\/p>\n<\/div>\n<\/div>\n
\n
\n
<\/i>Support<\/h3>\n<\/div>\n
\n
That\u2019s all for implementation of pagination in lightning component, still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you.  https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/<\/a><\/p>\n<\/div>\n<\/div>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog we will learn the implementation of pagination in lightning component, with the use of lightning bundle. Pagination in Lightning Component Goto Setup\u00a0>\u00a0Develop\u00a0>\u00a0Apex Classes\u00a0>\u00a0New Write the following code in Apex Class: Apex Controller- public with sharing class pagination { \/** * Webkul Software. * * @category Webkul * @author Webkul * @copyright Copyright […]<\/a><\/p>\n","protected":false},"author":104,"featured_media":61010,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3545,3554,1887],"tags":[4002,4001],"class_list":["post-64548","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightning-design-system","category-lightning-development","category-salesforce","tag-implementation-of-pagination-in-lightning-component-salesforce","tag-pagination-lightning-component"],"yoast_head":"\nImplementation of pagination in lightning component Salesforce<\/title>\n<meta name=\"description\" content=\"In this blog we will learn the implementation of pagination in lightning component, with the use of lightning bundle.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implementation of pagination in lightning component Salesforce\" \/>\n<meta property=\"og:description\" content=\"In this blog we will learn the implementation of pagination in lightning component, with the use of lightning bundle.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-16T07:46:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-16T07:03:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/lightning-code-snippet-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"945\" \/>\n\t<meta property=\"og:image:height\" content=\"356\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Aakanksha Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aakanksha Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/\"},\"author\":{\"name\":\"Aakanksha Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/7d54984c6524404eb2ba261ace62da80\"},\"headline\":\"Pagination in lightning component Salesforce\",\"datePublished\":\"2016-11-16T07:46:27+00:00\",\"dateModified\":\"2018-01-16T07:03:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/\"},\"wordCount\":174,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/lightning-code-snippet-1.png\",\"keywords\":[\"Implementation of pagination in lightning component Salesforce\",\"pagination lightning component\"],\"articleSection\":[\"Lightning Design System\",\"Lightning Development\",\"Salesforce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/\",\"url\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/\",\"name\":\"Implementation of pagination in lightning component Salesforce\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/lightning-code-snippet-1.png\",\"datePublished\":\"2016-11-16T07:46:27+00:00\",\"dateModified\":\"2018-01-16T07:03:05+00:00\",\"description\":\"In this blog we will learn the implementation of pagination in lightning component, with the use of lightning bundle.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/lightning-code-snippet-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/lightning-code-snippet-1.png\",\"width\":945,\"height\":356},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pagination in lightning component Salesforce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/7d54984c6524404eb2ba261ace62da80\",\"name\":\"Aakanksha Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Aakanksha Singh\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/aakanksha-singh391\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Implementation of pagination in lightning component Salesforce","description":"In this blog we will learn the implementation of pagination in lightning component, with the use of lightning bundle.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/","og_locale":"en_US","og_type":"article","og_title":"Implementation of pagination in lightning component Salesforce","og_description":"In this blog we will learn the implementation of pagination in lightning component, with the use of lightning bundle.","og_url":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-11-16T07:46:27+00:00","article_modified_time":"2018-01-16T07:03:05+00:00","og_image":[{"width":945,"height":356,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/lightning-code-snippet-1.png","type":"image\/png"}],"author":"Aakanksha Singh","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Aakanksha Singh","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/"},"author":{"name":"Aakanksha Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/7d54984c6524404eb2ba261ace62da80"},"headline":"Pagination in lightning component Salesforce","datePublished":"2016-11-16T07:46:27+00:00","dateModified":"2018-01-16T07:03:05+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/"},"wordCount":174,"commentCount":6,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/lightning-code-snippet-1.png","keywords":["Implementation of pagination in lightning component Salesforce","pagination lightning component"],"articleSection":["Lightning Design System","Lightning Development","Salesforce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/","url":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/","name":"Implementation of pagination in lightning component Salesforce","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/lightning-code-snippet-1.png","datePublished":"2016-11-16T07:46:27+00:00","dateModified":"2018-01-16T07:03:05+00:00","description":"In this blog we will learn the implementation of pagination in lightning component, with the use of lightning bundle.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/lightning-code-snippet-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/lightning-code-snippet-1.png","width":945,"height":356},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/pagination-in-lightning-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Pagination in lightning component Salesforce"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/7d54984c6524404eb2ba261ace62da80","name":"Aakanksha Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Aakanksha Singh"},"url":"https:\/\/webkul.com\/blog\/author\/aakanksha-singh391\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/64548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/104"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=64548"}],"version-history":[{"count":12,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/64548\/revisions"}],"predecessor-version":[{"id":109018,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/64548\/revisions\/109018"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/61010"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=64548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=64548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=64548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}