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
You can’t perform that action at this time.