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}"> | |
↑ | |
<aura:set attribute="else"> | |
↓ | |
</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}"> | |
↑ | |
<aura:set attribute="else"> | |
↓ | |
</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}"> | |
↑ | |
<aura:set attribute="else"> | |
↓ | |
</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); | |
} | |
}) |
This comment has been minimized.
This comment has been minimized.
Works great. Thanks! |
This comment has been minimized.
This comment has been minimized.
For some reason it doesn't sort the whole table and only sorts a select few fields? |
This comment has been minimized.
This comment has been minimized.
Works as Charm! Thanks! |
This comment has been minimized.
This comment has been minimized.
Great job, simple and effective! Thanks for sharing ++ |
This comment has been minimized.
This comment has been minimized.
Good job, working perfectly. |
This comment has been minimized.
This comment has been minimized.
Thanks for sharing, helped me alot |
This comment has been minimized.
This comment has been minimized.
Works great, thanks a lot. |
This comment has been minimized.
This comment has been minimized.
This is awesome. Thanks a lot :) |
This comment has been minimized.
This comment has been minimized.
Great work , Thanks a lot. Issue is date sorting not working properly |
This comment has been minimized.
This comment has been minimized.
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
This comment has been minimized.
I used the paganation out of this. Works great, saved me a lot of time. Thanks!