You need to sign in to do that
Don't have an account?
Kartik Bhalla
how to keep selected rows(checkbox) persistent in html table(aura iteration) in pagination when I move to next page and get back to previous page using aura component.?
Please helpppppp what I am missing
component code:-
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global"
controller="fetchAllContacts">
<!-- Attribute Declration For Pagination -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="contacts" type="Contact[]"/>
<aura:attribute name="page" type="integer" description="using for store page Number"/>
<aura:attribute name="pages" type="integer" description="using for store All Pages page Number"/>
<aura:attribute name="total" type="integer" description="total records count store "/>
<aura:attribute name="range" type="integer" description="range "/>
<aura:attribute name="recordEnd" type="Integer"/>
<aura:attribute name="isSelectAll" type="boolean" default="false"/>
<aura:attribute name="selectedCount" type="integer" default="0"/>
<aura:attribute name="pageSize" type="Integer"/>
<!--TABLE HEADER-->
<lightning:card>
<thead>
<tr class="slds-text-title_caps">
<th>
<label class="slds-checkbox">
<ui:inputCheckbox value="{!v.isSelectAll}" change="{!c.handleSelectAllContact}" aura:id="selectAll"/>
<span class="slds-checkbox--faux" />
<span class="slds-form-element__label"></span>
</label>
</th>
<th scope="col">
<div style="font-size: 15px;">
<div class="slds-truncate" title="Name">Contacts</div>
</div>
</th>
</tr>
</thead>
</lightning:card>
<!--TABLE-->
<div style="height:575px;">
<div class="slds-scrollable_y " style="height:100%; width:100%;">
<table aura:id="table" selectedRows="{!v.selection}" class="slds-table slds-table_fixed-layout">
<tbody>
<aura:iteration items="{!v.contacts}" var="item">
<tr>
<lightning:card variant="Narrow">
<th>
<label class="slds-checkbox">
<ui:inputCheckbox aura:id="singleCB" value="{!item.isChecked}" text="{!item.objContact.Id}" change="{!c.checkboxSelect}" />
<span class="slds-checkbox--faux" />
<span class="slds-form-element__label"></span>
</label>
</th>
<td>
<a target="_blank" href="{!'/'+item.objContact.Id}"><div style="height:180px; width:180px;"><aura:unescapedHtml value="{!item.objContact.Profile_Pic__c}" /></div></a>
</td>
<th>
<div style="font-size: 17px;">
<div class="slds-truncate" title="{!item.objContact.Name}">
Name: <a href="{!'/'+item.objContact.Id}">{!item.objContact.Name}</a>
</div>
<div class="slds-truncate" title="{!item.objContact.Account.Name}">
Account Name: <a href="{!'/'+item.objContact.AccountId}">{!item.objContact.Account.Name}</a>
</div>
<div class="slds-truncate" title="{!item.objContact.Title}">Title: {!item.objContact.Title}</div>
</div>
</th>
</lightning:card>
</tr>
<!-- <ui:outputRichText value="{!item.Profile_Pic__c}"/>-->
</aura:iteration>
</tbody>
</table>
</div>
</div>
<!--FOOTER-->
<lightning:card>
<aura:set attribute="footer">
<lightning:layout horizontalAlign="spread">
<lightning:layoutItem >
<span class="slds-badge slds-badge_lightest">
<p class="slds-truncate">{!v.range}-{!v.recordEnd} of {!v.total} Contacts </p>
</span>
</lightning:layoutItem>
<lightning:layoutItem >
<div class="slds-p-left_xx-small">
<ui:inputSelect aura:id="recordSize" label="Show Records " change="{!c.onSelectChange}">
<ui:inputSelectOption text="5" label="5" value="true"/>
<ui:inputSelectOption text="10" label="10"/>
<ui:inputSelectOption text="20" label="20"/>
<ui:inputSelectOption text="50" label="50"/>
</ui:inputSelect>
</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class="slds-p-right_xx-small">
<lightning:button disabled="{!v.page == 1}" variant="brand" label="Previous Page" onclick="{! c.navigate }" />
<lightning:button disabled="{!v.page == v.pages}" aura:id="previousPage" variant="brand" label="Next Page" onclick="{! c.navigate }" />
</div>
</lightning:layoutItem>
<lightning:layoutItem >
<span class="slds-badge slds-badge_lightest">
<p>Page {!v.page} of {!v.pages}</p></span>
</lightning:layoutItem>
</lightning:layout>
</aura:set>
</lightning:card>
<br/>
display total record and selected record count
<p class="slds-m-around_small">
<span class="slds-badge slds-badge_lightest" style="display:inline-block">
Total Records : {!v.selectedCount > 0 ? v.selectedCount + '/' : ''} {!v.total}
</span>
</p>
</aura:component>
js code:-
({
doInit: function(component, event, helper) {
// this function call on the component load first time
// get the page Number if it's not define, take 1 as default
//console.log('error'+page);
var page = component.get("v.page") || 1;
console.log('error'+page);
// get the select option (drop-down) values.
var recordToDisply = component.find("recordSize").get("v.value");
console.log('error'+recordToDisply);
// call the helper function
helper.getContacts(component, page, recordToDisply);
},
//Select all contacts
handleSelectAllContact: function(component, event, helper) {
var checkAllList = [];
var listOfContacts = component.get("v.contacts");
//var checkvalue = component.find("selectAll").get("v.value");
var selectedHeaderCheck = event.getSource().get("v.value");
// var checkContact = component.find("checkContact");
//if(checkvalue == true){
for(var i=0; i<listOfContacts.length; i++){
if(selectedHeaderCheck == true){
listOfContacts[i].isChecked = true;
//checkContact[i].set("v.value",true);
component.set("v.selectedCount", listOfContacts.length);
}
else{
listOfContacts[i].isChecked = false;
//checkContact[i].set("v.value",false);
component.set("v.selectedCount", 0);
}
checkAllList.push(listOfContacts[i]);
}
component.set("v.contacts", checkAllList);
},
checkboxSelect: function(component, event, helper) {
// var selectedCheckList = [];
//console.log('l'+selectedCheckList);
//var checkLength = component.find("checkContact");
var selectedRec = event.getSource().get("v.value");
// var checkContact = event.getSource().get("v.value");
//console.log('checkContactlelo'+checkContact);
var getSelectedNumber = component.get("v.selectedCount");
console.log('n'+getSelectedNumber);
if(selectedRec == true){
getSelectedNumber++;
// selectedCheckList.push(checkContact);
// console.log('checkContact'+checkContact.get("v.value"));
} else {
getSelectedNumber--;
// selectedCheckList.pop(checkContact);
component.find("selectAll").set("v.value", false);
}
component.set("v.selectedCount", getSelectedNumber);
// if all checkboxes are checked then set header checkbox with true
if (getSelectedNumber == component.get("v.pageSize")) {
component.find("selectAll").set("v.value", true);
}
},
navigate: function(component, event, helper) {
// this function call on click on the previous page button
var page = component.get("v.page") || 1;
// get the previous button label
var direction = event.getSource().get("v.label");
// get the select option (drop-down) values.
var recordToDisply = component.find("recordSize").get("v.value");
// set the current page,(using ternary operator.)
page = direction === "Previous Page" ? (page - 1) : (page + 1);
// call the helper function
helper.getContacts(component, page, recordToDisply);
},
onSelectChange: function(component, event, helper) {
// this function call on the select opetion change,
var page = 1
var recordToDisply = component.find("recordSize").get("v.value");
helper.getContacts(component, page, recordToDisply);
},
})
helper js:
({
getContacts: function(component, page, recordToDisply) {
// create a server side action.
var action = component.get("c.fetchContact");
// set the parameters to method
action.setParams({
"pageNumber": page,
"recordToDisply": recordToDisply
});
// set a call back
action.setCallback(this, function(a) {
// store the response return value (wrapper class insatance)
var result = a.getReturnValue();
console.log('result ---->' + JSON.stringify(result));
// set the component attributes value with wrapper class properties.
component.set("v.contacts", result.contacts);
component.set("v.page", result.page);
component.set("v.total", result.total);
component.set("v.pages", Math.ceil(result.total / recordToDisply));
component.set("v.range", result.range);
component.set("v.recordEnd", result.recordEnd);
component.set("v.selectedCount" , 0);
component.set("v.pageSize", result.pageSize);
// component.set("v.isChecked", result.isChecked);
//component.set("v.isSelectAll", false);
});
// enqueue the action
$A.enqueueAction(action);
}
})
apex class controller:
public with sharing class fetchAllContacts {
@AuraEnabled
public static ContactPagerWrapper fetchContact(Decimal pageNumber ,Integer recordToDisply) {
List<ContactPagerWrapper> modifiedList = new List<ContactPagerWrapper>();
Integer pageSize = recordToDisply;
Integer offset = ((Integer)pageNumber - 1) * pageSize;
// boolean isChecked = true;
Integer page = (Integer) pageNumber;
Integer recordEnd = pageSize * page;
Integer total = [SELECT count() FROM Contact];
// create a instance of wrapper class.
ContactPagerWrapper obj = new ContactPagerWrapper();
// set the pageSize,Page(Number), total records and accounts List(using OFFSET)
obj.pageSize = pageSize;
obj.page = page;
obj.total = total;
for(Contact c:[SELECT Name,Display_Pic__c,Profile_Pic__c, Account.Name, Title FROM Contact ORDER BY Name LIMIT :recordToDisply OFFSET :offset]){
modifiedList.add(new ContactPagerWrapper(false,c));
}
obj.contacts = modifiedList;
obj.range = offset+1;
obj.recordEnd = total >= recordEnd ? recordEnd : total;
//obj.isChecked = isChecked;
// return the wrapper class instance .
return obj;
}
// create a wrapper class with @AuraEnabled Properties
public class ContactPagerWrapper {
//@AuraEnabled public boolean isChecked {get;set;}
@AuraEnabled public Integer pageSize {get;set;}
@AuraEnabled public Integer page {get;set;}
@AuraEnabled public Integer total {get;set;}
@AuraEnabled public Integer range {get;set;}
@AuraEnabled public Integer recordEnd {get;set;}
@AuraEnabled public List<ContactPagerWrapper> contacts {get;set;}
@AuraEnabled public boolean isChecked {get;set;}
@AuraEnabled public Contact objContact{get;set;}
public ContactPagerWrapper(boolean isChecked, Contact objContact){
this.isChecked = isChecked;
this.objContact = objContact;
}
public ContactPagerWrapper(){
}
}
}
I know the code is very long. but Plzz help me..
component code:-
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global"
controller="fetchAllContacts">
<!-- Attribute Declration For Pagination -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="contacts" type="Contact[]"/>
<aura:attribute name="page" type="integer" description="using for store page Number"/>
<aura:attribute name="pages" type="integer" description="using for store All Pages page Number"/>
<aura:attribute name="total" type="integer" description="total records count store "/>
<aura:attribute name="range" type="integer" description="range "/>
<aura:attribute name="recordEnd" type="Integer"/>
<aura:attribute name="isSelectAll" type="boolean" default="false"/>
<aura:attribute name="selectedCount" type="integer" default="0"/>
<aura:attribute name="pageSize" type="Integer"/>
<!--TABLE HEADER-->
<lightning:card>
<thead>
<tr class="slds-text-title_caps">
<th>
<label class="slds-checkbox">
<ui:inputCheckbox value="{!v.isSelectAll}" change="{!c.handleSelectAllContact}" aura:id="selectAll"/>
<span class="slds-checkbox--faux" />
<span class="slds-form-element__label"></span>
</label>
</th>
<th scope="col">
<div style="font-size: 15px;">
<div class="slds-truncate" title="Name">Contacts</div>
</div>
</th>
</tr>
</thead>
</lightning:card>
<!--TABLE-->
<div style="height:575px;">
<div class="slds-scrollable_y " style="height:100%; width:100%;">
<table aura:id="table" selectedRows="{!v.selection}" class="slds-table slds-table_fixed-layout">
<tbody>
<aura:iteration items="{!v.contacts}" var="item">
<tr>
<lightning:card variant="Narrow">
<th>
<label class="slds-checkbox">
<ui:inputCheckbox aura:id="singleCB" value="{!item.isChecked}" text="{!item.objContact.Id}" change="{!c.checkboxSelect}" />
<span class="slds-checkbox--faux" />
<span class="slds-form-element__label"></span>
</label>
</th>
<td>
<a target="_blank" href="{!'/'+item.objContact.Id}"><div style="height:180px; width:180px;"><aura:unescapedHtml value="{!item.objContact.Profile_Pic__c}" /></div></a>
</td>
<th>
<div style="font-size: 17px;">
<div class="slds-truncate" title="{!item.objContact.Name}">
Name: <a href="{!'/'+item.objContact.Id}">{!item.objContact.Name}</a>
</div>
<div class="slds-truncate" title="{!item.objContact.Account.Name}">
Account Name: <a href="{!'/'+item.objContact.AccountId}">{!item.objContact.Account.Name}</a>
</div>
<div class="slds-truncate" title="{!item.objContact.Title}">Title: {!item.objContact.Title}</div>
</div>
</th>
</lightning:card>
</tr>
<!-- <ui:outputRichText value="{!item.Profile_Pic__c}"/>-->
</aura:iteration>
</tbody>
</table>
</div>
</div>
<!--FOOTER-->
<lightning:card>
<aura:set attribute="footer">
<lightning:layout horizontalAlign="spread">
<lightning:layoutItem >
<span class="slds-badge slds-badge_lightest">
<p class="slds-truncate">{!v.range}-{!v.recordEnd} of {!v.total} Contacts </p>
</span>
</lightning:layoutItem>
<lightning:layoutItem >
<div class="slds-p-left_xx-small">
<ui:inputSelect aura:id="recordSize" label="Show Records " change="{!c.onSelectChange}">
<ui:inputSelectOption text="5" label="5" value="true"/>
<ui:inputSelectOption text="10" label="10"/>
<ui:inputSelectOption text="20" label="20"/>
<ui:inputSelectOption text="50" label="50"/>
</ui:inputSelect>
</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class="slds-p-right_xx-small">
<lightning:button disabled="{!v.page == 1}" variant="brand" label="Previous Page" onclick="{! c.navigate }" />
<lightning:button disabled="{!v.page == v.pages}" aura:id="previousPage" variant="brand" label="Next Page" onclick="{! c.navigate }" />
</div>
</lightning:layoutItem>
<lightning:layoutItem >
<span class="slds-badge slds-badge_lightest">
<p>Page {!v.page} of {!v.pages}</p></span>
</lightning:layoutItem>
</lightning:layout>
</aura:set>
</lightning:card>
<br/>
display total record and selected record count
<p class="slds-m-around_small">
<span class="slds-badge slds-badge_lightest" style="display:inline-block">
Total Records : {!v.selectedCount > 0 ? v.selectedCount + '/' : ''} {!v.total}
</span>
</p>
</aura:component>
js code:-
({
doInit: function(component, event, helper) {
// this function call on the component load first time
// get the page Number if it's not define, take 1 as default
//console.log('error'+page);
var page = component.get("v.page") || 1;
console.log('error'+page);
// get the select option (drop-down) values.
var recordToDisply = component.find("recordSize").get("v.value");
console.log('error'+recordToDisply);
// call the helper function
helper.getContacts(component, page, recordToDisply);
},
//Select all contacts
handleSelectAllContact: function(component, event, helper) {
var checkAllList = [];
var listOfContacts = component.get("v.contacts");
//var checkvalue = component.find("selectAll").get("v.value");
var selectedHeaderCheck = event.getSource().get("v.value");
// var checkContact = component.find("checkContact");
//if(checkvalue == true){
for(var i=0; i<listOfContacts.length; i++){
if(selectedHeaderCheck == true){
listOfContacts[i].isChecked = true;
//checkContact[i].set("v.value",true);
component.set("v.selectedCount", listOfContacts.length);
}
else{
listOfContacts[i].isChecked = false;
//checkContact[i].set("v.value",false);
component.set("v.selectedCount", 0);
}
checkAllList.push(listOfContacts[i]);
}
component.set("v.contacts", checkAllList);
},
checkboxSelect: function(component, event, helper) {
// var selectedCheckList = [];
//console.log('l'+selectedCheckList);
//var checkLength = component.find("checkContact");
var selectedRec = event.getSource().get("v.value");
// var checkContact = event.getSource().get("v.value");
//console.log('checkContactlelo'+checkContact);
var getSelectedNumber = component.get("v.selectedCount");
console.log('n'+getSelectedNumber);
if(selectedRec == true){
getSelectedNumber++;
// selectedCheckList.push(checkContact);
// console.log('checkContact'+checkContact.get("v.value"));
} else {
getSelectedNumber--;
// selectedCheckList.pop(checkContact);
component.find("selectAll").set("v.value", false);
}
component.set("v.selectedCount", getSelectedNumber);
// if all checkboxes are checked then set header checkbox with true
if (getSelectedNumber == component.get("v.pageSize")) {
component.find("selectAll").set("v.value", true);
}
},
navigate: function(component, event, helper) {
// this function call on click on the previous page button
var page = component.get("v.page") || 1;
// get the previous button label
var direction = event.getSource().get("v.label");
// get the select option (drop-down) values.
var recordToDisply = component.find("recordSize").get("v.value");
// set the current page,(using ternary operator.)
page = direction === "Previous Page" ? (page - 1) : (page + 1);
// call the helper function
helper.getContacts(component, page, recordToDisply);
},
onSelectChange: function(component, event, helper) {
// this function call on the select opetion change,
var page = 1
var recordToDisply = component.find("recordSize").get("v.value");
helper.getContacts(component, page, recordToDisply);
},
})
helper js:
({
getContacts: function(component, page, recordToDisply) {
// create a server side action.
var action = component.get("c.fetchContact");
// set the parameters to method
action.setParams({
"pageNumber": page,
"recordToDisply": recordToDisply
});
// set a call back
action.setCallback(this, function(a) {
// store the response return value (wrapper class insatance)
var result = a.getReturnValue();
console.log('result ---->' + JSON.stringify(result));
// set the component attributes value with wrapper class properties.
component.set("v.contacts", result.contacts);
component.set("v.page", result.page);
component.set("v.total", result.total);
component.set("v.pages", Math.ceil(result.total / recordToDisply));
component.set("v.range", result.range);
component.set("v.recordEnd", result.recordEnd);
component.set("v.selectedCount" , 0);
component.set("v.pageSize", result.pageSize);
// component.set("v.isChecked", result.isChecked);
//component.set("v.isSelectAll", false);
});
// enqueue the action
$A.enqueueAction(action);
}
})
apex class controller:
public with sharing class fetchAllContacts {
@AuraEnabled
public static ContactPagerWrapper fetchContact(Decimal pageNumber ,Integer recordToDisply) {
List<ContactPagerWrapper> modifiedList = new List<ContactPagerWrapper>();
Integer pageSize = recordToDisply;
Integer offset = ((Integer)pageNumber - 1) * pageSize;
// boolean isChecked = true;
Integer page = (Integer) pageNumber;
Integer recordEnd = pageSize * page;
Integer total = [SELECT count() FROM Contact];
// create a instance of wrapper class.
ContactPagerWrapper obj = new ContactPagerWrapper();
// set the pageSize,Page(Number), total records and accounts List(using OFFSET)
obj.pageSize = pageSize;
obj.page = page;
obj.total = total;
for(Contact c:[SELECT Name,Display_Pic__c,Profile_Pic__c, Account.Name, Title FROM Contact ORDER BY Name LIMIT :recordToDisply OFFSET :offset]){
modifiedList.add(new ContactPagerWrapper(false,c));
}
obj.contacts = modifiedList;
obj.range = offset+1;
obj.recordEnd = total >= recordEnd ? recordEnd : total;
//obj.isChecked = isChecked;
// return the wrapper class instance .
return obj;
}
// create a wrapper class with @AuraEnabled Properties
public class ContactPagerWrapper {
//@AuraEnabled public boolean isChecked {get;set;}
@AuraEnabled public Integer pageSize {get;set;}
@AuraEnabled public Integer page {get;set;}
@AuraEnabled public Integer total {get;set;}
@AuraEnabled public Integer range {get;set;}
@AuraEnabled public Integer recordEnd {get;set;}
@AuraEnabled public List<ContactPagerWrapper> contacts {get;set;}
@AuraEnabled public boolean isChecked {get;set;}
@AuraEnabled public Contact objContact{get;set;}
public ContactPagerWrapper(boolean isChecked, Contact objContact){
this.isChecked = isChecked;
this.objContact = objContact;
}
public ContactPagerWrapper(){
}
}
}
I know the code is very long. but Plzz help me..
Hi Kartik,
Kindly follow this two below article to keep the selected row persistent :-
https://sfdcfacts.com/lightning/keep-selected-rows-persistent-in-lightning-datatable-pagination/
https://www.linkedin.com/pulse/keep-selected-rows-persistent-lightning-web-component-harsh-patel-
If the above information helps you, please mark it best answer.
Regards,
Priya Ranjan
I have already gone through these articles they are using Standard lightning data table but I am using custom html table. Please can u tell how to do this thing with custom html table.