Apex Controller:
public class SampleAuraController { //Get Contact List @AuraEnabled public static List<Contact> getContactList(Integer recordLimit, Integer recordOffset){ Integer intLimit = Integer.valueof(recordLimit); Integer intOffset = Integer.valueof(recordOffset); List<Contact> conList = new List<Contact>(); conList = [SELECT Id, Name, Email, Phone FROM Contact LIMIT :intLimit Offset :intOffset]; return conList; } //Get Total Number of Contacts @AuraEnabled public static Integer getTotalContacts(){ AggregateResult results = [SELECT Count(Id) TotalContacts From Contact]; Integer totalContacts = (Integer)results.get('TotalContacts') ; return totalContacts; } //Delete Contact @AuraEnabled public static void deleteContact(Contact con){ Delete con; } }
Lightning Component:
<!--Sample.cmp--> <aura:component controller="SampleAuraController" implements="flexipage:availableForAllPageTypes,force:appHostable"> <!--Declare Attributes--> <aura:attribute name="data" type="Object"/> <aura:attribute name="columns" type="List"/> <aura:attribute name="selectedRowsCount" type="Integer" default="0"/> <aura:attribute name="selectedRowsDetails" type="Object" /> <aura:attribute name="selectedRowsList" type="List" /> <aura:attribute name="maxRowSelection" type="Integer" default="10"/> <aura:attribute name="selectedRows" type="List" /> <aura:attribute name="enableInfiniteLoading" type="Boolean" default="true"/> <aura:attribute name="initialRows" type="Integer" default="10"/> <aura:attribute name="rowsToLoad" type="Integer" default="10"/> <aura:attribute name="totalNumberOfRows" type="Integer" default="10"/> <aura:attribute name="loadMoreStatus" type="String" default="Please scroll down to load more data"/> <aura:attribute name="showRowNumberColumn" type="Boolean" default="false"/> <aura:attribute name="rowNumberOffset" type="Integer" default="0"/> <aura:attribute name="rowsToAdd" type="Integer" default="10"/> <aura:attribute name="currentCount" type="Integer" default="10"/> <aura:attribute name="sortedBy" type="String"/> <aura:attribute name="sortedDirection" type="String"/> <aura:attribute name="defaultSortDirection" type="String"/> <!--Declare Handlers--> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <!--Component Start--> <div class="slds-m-around_xx-large" style="height: 300px"> <lightning:datatable columns="{!v.columns}" data="{!v.data}" keyField="Id" showRowNumberColumn="true" rowNumberOffset="0" onrowaction="{!c.handleRowAction}" selectedRows="{!v.selectedRows}" maxRowSelection="{!v.maxRowSelection}" onrowselection="{!c.handleSelectedRow}" enableInfiniteLoading="true" loadMoreOffset="{!v.loadMoreOffset}" sortedBy="{!v.sortedBy}" sortedDirection="{!v.sortedDirection}" defaultSortDirection="{!v.defaultSortDirection }" onsort="{!c.handleColumnSorting}" onloadmore="{!c.handleLoadMoreContacts}"/> <br/> <div class="slds-float_left"> <strong>Total Rows : {!v.totalNumberOfRows}</strong> <strong>Selected Rows: {!v.selectedRowsCount }</strong> </div> <div class="slds-float_right"> <strong>{!v.loadMoreStatus}</strong> </div> <br/> <br/> <div class="slds-float_left"> <lightning:button label="Get Selected Contacts" variant="brand" onclick="{!c.handleSelectedRows}"/> </div> </div> <!--Component End--> </aura:component>
Lightning Component JS Controller:
({ doInit : function(component, event, helper) { helper.getTotalNumberOfContacts(component); helper.getColumnAndAction(component); helper.getContacts(component); }, handleLoadMoreContacts: function (component, event, helper) { event.getSource().set("v.isLoading", true); component.set('v.loadMoreStatus', 'Loading....'); helper.getMoreContacts(component, component.get('v.rowsToLoad')).then($A.getCallback(function (data) { if (component.get('v.data').length == component.get('v.totalNumberOfRows')) { component.set('v.enableInfiniteLoading', false); component.set('v.loadMoreStatus', 'No more data to load'); } else { var currentData = component.get('v.data'); var newData = currentData.concat(data); component.set('v.data', newData); component.set('v.loadMoreStatus', 'Please scroll down to load more data'); } event.getSource().set("v.isLoading", false); })); }, handleSelectedRows: function (component, event, helper) { var data = component.get('v.data'); var selectedRowList = component.get("v.selectedRowsList"); console.log('selectedRowList-' + selectedRowList); }, handleSelectedRow: function(component, event, helper){ var selectedRows = event.getParam('selectedRows'); component.set("v.selectedRowsCount", selectedRows.length); let obj =[] ; for (var i = 0; i < selectedRows.length; i++){ obj.push({Name:selectedRows[i].Name}); } component.set("v.selectedRowsDetails", JSON.stringify(obj) ); component.set("v.selectedRowsList", event.getParam('selectedRows')); }, handleRowAction: function (component, event, helper) { var action = event.getParam('action'); switch (action.name) { case 'new': helper.createContactRecord(component, event); break; case 'edit': helper.editContactRecord(component, event); break; case 'delete': helper.deleteContactRecord(component, event); break; case 'view': helper.viewContactRecord(component, event); break; } }, handleColumnSorting: function (component, event, helper) { var fieldName = event.getParam('fieldName'); var sortDirection = event.getParam('sortDirection'); component.set("v.sortedBy", fieldName); component.set("v.sortedDirection", sortDirection); helper.sortData(component, fieldName, sortDirection); }, })
Lightning Component JS Helper:
({ getContacts : function(component) { var action = component.get("c.getContactList"); action.setParams({ "recordLimit": component.get("v.initialRows"), "recordOffset": component.get("v.rowNumberOffset") }); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS" ) { var resultData = response.getReturnValue(); component.set("v.data", resultData); component.set("v.currentCount", component.get("v.initialRows")); } }); $A.enqueueAction(action); }, getTotalNumberOfContacts : function(component) { var action = component.get("c.getTotalContacts"); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS" ) { var resultData = response.getReturnValue(); component.set("v.totalNumberOfRows", resultData); } }); $A.enqueueAction(action); }, getColumnAndAction : function(component) { var actions = [ {label: 'New', name: 'new'}, {label: 'Edit', name: 'edit'}, {label: 'Delete', name: 'delete'}, {label: 'View', name: 'view'} ]; component.set('v.columns', [ {label: 'Name', fieldName: 'Name', type: 'text', sortable:true}, {label: 'Email', fieldName: 'Email', type: 'email', sortable:true}, {label: 'Phone', fieldName: 'Phone', type: 'phone', sortable:true}, {type: 'action', typeAttributes: { rowActions: actions } } ]); }, getMoreContacts: function(component , rows){ return new Promise($A.getCallback(function(resolve, reject) { var action = component.get('c.getContactList'); var recordOffset = component.get("v.currentCount"); var recordLimit = component.get("v.initialRows"); action.setParams({ "recordLimit": recordLimit, "recordOffset": recordOffset }); action.setCallback(this, function(response) { var state = response.getState(); if(state === "SUCCESS"){ var resultData = response.getReturnValue(); resolve(resultData); recordOffset = recordOffset+recordLimit; component.set("v.currentCount", recordOffset); } }); $A.enqueueAction(action); })); }, sortData: function (component, fieldName, sortDirection) { var data = component.get("v.data"); var reverse = sortDirection !== 'asc'; data.sort(this.sortBy(fieldName, reverse)) component.set("v.data", data); }, sortBy: function (field, reverse, primer) { var key = primer ? function(x) {return primer(x[field])} : function(x) {return x[field]}; reverse = !reverse ? 1 : -1; return function (a, b) { return a = key(a), b = key(b), reverse * ((a > b) - (b > a)); } }, viewContactRecord : function(component, event) { var row = event.getParam('row'); var recordId = row.Id; var navEvt = $A.get("event.force:navigateToSObject"); navEvt.setParams({ "recordId": recordId, "slideDevName": "detail" }); navEvt.fire(); }, deleteContactRecord : function(component, event) { var action = event.getParam('action'); var row = event.getParam('row'); var action = component.get("c.deleteContact"); action.setParams({ "con": row }); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS" ) { var rows = component.get('v.data'); var rowIndex = rows.indexOf(row); rows.splice(rowIndex, 1); component.set('v.data', rows); var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ "title": "Success!", "message": "The record has been delete successfully." }); toastEvent.fire(); } }); $A.enqueueAction(action); }, editContactRecord : function(component, event) { var row = event.getParam('row'); var recordId = row.Id; var editRecordEvent = $A.get("e.force:editRecord"); editRecordEvent.setParams({ "recordId": recordId }); editRecordEvent.fire(); }, createContactRecord : function (component, event) { var createRecordEvent = $A.get("e.force:createRecord"); createRecordEvent.setParams({ "entityApiName": "Contact" }); createRecordEvent.fire(); } })