Lightning Paging and Sorting Demo

pagination.cmp

<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>

paginationController.js

({
    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"));
    }
})

pagingSorting.app

<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>

PagingSortingController.cls

global class PagingSortingController {
    @AuraEnabled global static Account[] getAccounts() {
        return [SELECT Name, Industry, AnnualRevenue FROM Account LIMIT 1000];
    }
}

pagingSortingController.js

({
	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);
    },
})

pagingSortingHelper.js

({
    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);
	}
})

Works great. Thanks!

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

Works as Charm! Thanks!

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

Good job, working perfectly.

Thanks for sharing, helped me alot

Works great, thanks a lot.

This is awesome. Thanks a lot :)

Great work , Thanks a lot.

Issue is date sorting not working properly

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!!