I am implementing lightning:datatable with pagination and save all the selected records at once i am facing two issues:
- if I select row2,3,4 in the first ten records and click next it automatically select the row12,13,14 on the next 10 records.
- if i select-row2,3,4 and deselect row4 and click next and select row17,18 and then try to save all at once when i click save by accessing
component.find("accountTable").get("v.selectedRows");It is coming as undefined.
Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="AccountController">
<aura:attribute name="AccountData" type="Object"/>
<aura:attribute name="SelectedAccount" type="Object[]"/>
<aura:attribute name="columns" type="List"/>
<!-- Attribute Declration For Pagination -->
<aura:attribute name="PaginationList" type="account"/>
<aura:attribute name="startPage" type="Integer" />
<aura:attribute name="endPage" type="Integer"/>
<aura:attribute name="totalRecords" type="Integer"/>
<aura:attribute name="pageSize" type="Integer" default="10"/>
<!-- Attribute Declration For Pagination End-->
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<label>Account Table</label>
<lightning:datatable aura:id="accountTable" data="{! v.PaginationList }"
columns="{! v.columns }"
keyField="id"
onrowselection="{! c.getSelectedName }"/>
<br/>
<lightning:buttonGroup >
<lightning:button label="Previous" disabled="{!v.startPage == 0}"
onclick="{!c.previous}" variant="brand"
iconName='utility:back'/>
<lightning:button label="Next" disabled="{!v.endPage >= v.totalRecords}"
onclick="{!c.next}" variant="brand"
iconName='utility:forward' iconPosition='right'/>
</lightning:buttonGroup>
<lightning:button label="Save"
onclick="{!c.save}" variant="brand"/>
</aura:component>
Controller:
({
doInit: function (component, event, helper) {
// Set the columns of the Table
component.set('v.columns', [
{label: 'Account Name', fieldName: 'Name', type: 'text'},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Type', fieldName: 'Type', type: 'text'},
{label: 'Id', fieldName: 'Id', type: 'text'},
]);
helper.doFetchAccount(component);
},getSelectedName: function (component, event) {
var selectedRows = event.getParam('selectedRows');
var selectedAccount=[];
selectedAccount=component.get("v.SelectedAccount");
for (var i = 0; i < selectedRows.length; i++){
var row=selectedRows[i];
if(selectedAccount.includes(row)==false){
selectedAccount.push(row);
} }
component.set("v.SelectedAccount",selectedAccount); console.log("selectedAccount"+JSON.stringify(component.get("v.SelectedAccount")));},
next: function (component, event, helper) {
helper.next(component, event);
},
previous: function (component, event, helper) {
helper.previous(component, event);
},
save: function (component, event, helper) {
helper.save(component, event);
}
})
Helper:
({
doFetchAccount : function(component) {
var action = component.get('c.showAccounts');
action.setCallback(this, function(response){
var state = response.getState();
if(state === 'SUCCESS' && component.isValid()){
var pageSize = component.get("v.pageSize");
component.set('v.AccountData', response.getReturnValue());
// get size of all the records and then hold into an attribute "totalRecords"
component.set("v.totalRecords", component.get("v.AccountData").length);
// set star as 0
component.set("v.startPage",0);
component.set("v.endPage",pageSize-1);
var PaginationList = [];
for(var i=0; i< pageSize; i++){
if(component.get("v.AccountData").length> i)
PaginationList.push(response.getReturnValue()[i]);
}
component.set('v.PaginationList', PaginationList);
}else{
alert('ERROR');
}
});
$A.enqueueAction(action);
},
next : function(component, event){
var sObjectList = component.get("v.AccountData");
var end = component.get("v.endPage");
var start = component.get("v.startPage");
var pageSize = component.get("v.pageSize");
var Paginationlist = [];
var counter = 0;
component.find("accountTable").get("v.selectedRows");
console.log('selectedRecords'+component.find("accountTable").get("v.selectedRows"));
for(var i=end+1; i<end+pageSize+1; i++){
if(sObjectList.length > i){
Paginationlist.push(sObjectList[i]);
}
counter ++ ;
}
start = start + counter;
end = end + counter;
component.set("v.startPage",start);
component.set("v.endPage",end);
component.set('v.PaginationList', Paginationlist);
},
previous : function(component, event){
var sObjectList = component.get("v.AccountData");
var end = component.get("v.endPage");
var start = component.get("v.startPage");
var pageSize = component.get("v.pageSize");
var Paginationlist = [];
var counter = 0;
for(var i= start-pageSize; i < start ; i++){
if(i > -1){
Paginationlist.push(sObjectList[i]);
counter ++;
}else{
start++;
}
}
start = start - counter;
end = end - counter;
component.set("v.startPage",start);
component.set("v.endPage",end);
component.set('v.PaginationList', Paginationlist);
},
save : function(component, event){
component.find("accountTable").get("v.selectedRows");
console.log('saveRecords'+component.find("accountTable").get("v.selectedRows"));
}
})
Apex:
public class AccountController {
/*Display account data*/
@AuraEnabled
public static List<Account> showAccounts(){
List<Account> accountList = new List<Account>();
accountList = [Select Id, Name, Industry,Type From Account LIMIT 100 ];
return accountList;
}
}
