Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Lightning Paging and Sorting Demo
<aura:component >
<aura:attribute name="currentPageNumber" type="Integer" required="true" />
<aura:attribute name="maxPageNumber" type="Integer" required="true" />
<div class="slds-button-group" role="group">
<button onclick="{!c.firstPage}" class="slds-button slds-button--neutral">
First
</button>
<button onclick="{!c.prevPage}" class="slds-button slds-button--neutral">
Prev
</button>
<button class="slds-button slds-button--neutral">
{!v.currentPageNumber} / {!v.maxPageNumber}
</button>
<button onclick="{!c.nextPage}" class="slds-button slds-button--neutral">
Next
</button>
<button onclick="{!c.lastPage}" class="slds-button slds-button--neutral">
Last
</button>
</div>
</aura:component>
({
firstPage: function(component, event, helper) {
component.set("v.currentPageNumber", 1);
},
prevPage: function(component, event, helper) {
component.set("v.currentPageNumber", Math.max(component.get("v.currentPageNumber")-1, 1));
},
nextPage: function(component, event, helper) {
component.set("v.currentPageNumber", Math.min(component.get("v.currentPageNumber")+1, component.get("v.maxPageNumber")));
},
lastPage: function(component, event, helper) {
component.set("v.currentPageNumber", component.get("v.maxPageNumber"));
}
})
<aura:application extends="force:slds" controller="PagingSortingController">
<aura:attribute type="Account[]" name="allAccounts" />
<aura:attribute type="Account[]" name="currentList" />
<aura:attribute type="Integer" name="pageNumber" default="1" />
<aura:attribute type="Integer" name="maxPage" default="1" />
<aura:attribute type="String" name="sortField" />
<aura:attribute type="Boolean" name="sortAsc" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler name="change" value="{!v.pageNumber}" action="{!c.renderPage}" />
<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div onclick="{!c.sortByName}"
class="slds-truncate"
title="Account Name">
Account Name
<aura:if isTrue="{!v.sortField=='Name'}">
<span>
<aura:if isTrue="{!v.sortAsc}">
&#8593;
<aura:set attribute="else">
&#8595;
</aura:set>
</aura:if>
</span>
</aura:if>
</div>
</th>
<th scope="col">
<div onclick="{!c.sortByIndustry}"
class="slds-truncate"
title="Account Name">
Industry
<aura:if isTrue="{!v.sortField=='Industry'}">
<span>
<aura:if isTrue="{!v.sortAsc}">
&#8593;
<aura:set attribute="else">
&#8595;
</aura:set>
</aura:if>
</span>
</aura:if>
</div>
</th>
<th scope="col">
<div onclick="{!c.sortByAnnualRevenue}"
class="slds-truncate"
title="Account Name">
Annual Revenue
<aura:if isTrue="{!v.sortField=='AnnualRevenue'}">
<span>
<aura:if isTrue="{!v.sortAsc}">
&#8593;
<aura:set attribute="else">
&#8595;
</aura:set>
</aura:if>
</span>
</aura:if>
</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.currentList}"
var="record">
<tr>
<th data-label="Account Name">
<div class="slds-truncate" title="{!record.Name}">
{!record.Name}
</div>
</th>
<th data-label="Industry">
<div class="slds-truncate" title="{!record.Industry}">
{!record.Industry}
</div>
</th>
<th data-label="Annual Revenue">
<div class="slds-truncate" title="{!record.AnnualRevenue}">
{!record.AnnualRevenue}
</div>
</th>
</tr>
</aura:iteration>
</tbody>
</table>
<c:pagination currentPageNumber="{!v.pageNumber}"
maxPageNumber="{!v.maxPage}" />
</aura:application>
global class PagingSortingController {
@AuraEnabled global static Account[] getAccounts() {
return [SELECT Name, Industry, AnnualRevenue FROM Account LIMIT 1000];
}
}
({
doInit: function(component, event, helper) {
var action = component.get("c.getAccounts");
action.setCallback(this, function(result) {
var records = result.getReturnValue();
component.set("v.allAccounts", records);
component.set("v.maxPage", Math.floor((records.length+9)/10));
helper.sortBy(component, "Name");
});
$A.enqueueAction(action);
},
sortByName: function(component, event, helper) {
helper.sortBy(component, "Name");
},
sortByIndustry: function(component, event, helper) {
helper.sortBy(component, "Industry");
},
sortByAnnualRevenue: function(component, event, helper) {
helper.sortBy(component, "AnnualRevenue");
},
renderPage: function(component, event, helper) {
helper.renderPage(component);
},
})
({
sortBy: function(component, field) {
var sortAsc = component.get("v.sortAsc"),
sortField = component.get("v.sortField"),
records = component.get("v.allAccounts");
sortAsc = sortField != field || !sortAsc;
records.sort(function(a,b){
var t1 = a[field] == b[field],
t2 = (!a[field] && b[field]) || (a[field] < b[field]);
return t1? 0: (sortAsc?-1:1)*(t2?1:-1);
});
component.set("v.sortAsc", sortAsc);
component.set("v.sortField", field);
component.set("v.allAccounts", records);
this.renderPage(component);
},
renderPage: function(component) {
var records = component.get("v.allAccounts"),
pageNumber = component.get("v.pageNumber"),
pageRecords = records.slice((pageNumber-1)*10, pageNumber*10);
component.set("v.currentList", pageRecords);
}
})
@waltonzt

This comment has been minimized.

Copy link

@waltonzt waltonzt commented Aug 18, 2017

I used the paganation out of this. Works great, saved me a lot of time. Thanks!

@dev-mks

This comment has been minimized.

Copy link

@dev-mks dev-mks commented Mar 15, 2018

Works great. Thanks!

@Smadger1

This comment has been minimized.

Copy link

@Smadger1 Smadger1 commented Mar 23, 2018

For some reason it doesn't sort the whole table and only sorts a select few fields?

@arvindnegi

This comment has been minimized.

Copy link

@arvindnegi arvindnegi commented Mar 27, 2018

Works as Charm! Thanks!

@binaryLady

This comment has been minimized.

Copy link

@binaryLady binaryLady commented Apr 4, 2018

Great job, simple and effective! Thanks for sharing ++

@gaurishwnc

This comment has been minimized.

Copy link

@gaurishwnc gaurishwnc commented Apr 24, 2018

Good job, working perfectly.

@rmounikar

This comment has been minimized.

Copy link

@rmounikar rmounikar commented Aug 19, 2018

Thanks for sharing, helped me alot

@m-fedorenko

This comment has been minimized.

Copy link

@m-fedorenko m-fedorenko commented Sep 12, 2018

Works great, thanks a lot.

@ZnoorZ

This comment has been minimized.

Copy link

@ZnoorZ ZnoorZ commented Sep 22, 2018

This is awesome. Thanks a lot :)

@vikasrathi91

This comment has been minimized.

Copy link

@vikasrathi91 vikasrathi91 commented Oct 8, 2018

Great work , Thanks a lot.

Issue is date sorting not working properly

@HemantRana09

This comment has been minimized.

Copy link

@HemantRana09 HemantRana09 commented Sep 26, 2019

You are awesome man... Best code and worked like a charm... I was smashing my head from past 3 hours for sorting and now I got this code and it worked flawlessly and I figured out what I was doing wrong... Thanks again!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment