You need to sign in to do that
Don't have an account?
venkat bojja
DataTable in Lightning component
Hi Team,
I implemented a DataTable in lightning component with lightning:datatable tag.I need to check only one check box at a time and when i checked that check box i need to get that record id into URL.i have one image above the my datatable. When click on that image it should navigate to another compoent with the checked RecordId.
Please help me on this... Thanks in advance
Refence Code:
My Refence code is
Component:
<aura:component controller="DataTableWithPagenation">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="Accounts" type="Account[]"/>
<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="mycolumns" type="List"/>
<div class="slds-m-around_small">
<div class="slds-page-header" role="banner">
<p class="slds-page-header__title slds-truncate">{!v.total} Accounts • page {!v.page} / {!v.pages}</p>
<ui:inputSelect aura:id="recordSize" label="Display Record Per Page: " change="{!c.onSelectChange}">
<ui:inputSelectOption text="10" label="10" value="true"/>
<ui:inputSelectOption text="15" label="15"/>
<ui:inputSelectOption text="20" label="20"/>
</ui:inputSelect>
</div>
<p class="slds-p-horizontal_small slds-box">
<lightning:datatable data="{!v.Accounts}" columns="{! v.mycolumns }" keyField="id" />
</p>
<div class="slds-align_absolute-center">
<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>
<!-- <table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="Name">Account Name</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.Accounts}" var="account">
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="{!account.Name}">{!account.Name}</div>
</th>
</tr>
</aura:iteration>
</tbody>
</table>-->
</div>
</aura:component>
===============================================================
controller.js
({
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
var page = component.get("v.page") || 1;
// get the select option (drop-down) values.
var recordToDisply = component.find("recordSize").get("v.value");
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name', type: 'Name',sortable:'true'},
{label: 'Phone', fieldName: 'Phone', type: 'Phone',sortable:'true'},
{label: 'Email ID', fieldName: 'Email_ID__c', type: 'Email',sortable:'true'}
]);
// call the helper function
helper.getAccounts(component, page, recordToDisply);
},
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.getAccounts(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.getAccounts(component, page, recordToDisply);
},
})
===============================================================================
helper.js
({
getAccounts: function(component, page, recordToDisply) {
// create a server side action.
var action = component.get("c.fetchAccount");
// 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.Accounts", result.accounts);
component.set("v.page", result.page);
component.set("v.total", result.total);
component.set("v.pages", Math.ceil(result.total / recordToDisply));
});
// enqueue the action
$A.enqueueAction(action);
}
})
===================================================
Apex controller:
public with sharing class DataTableWithPagenation {
@AuraEnabled
public static AccountPagerWrapper fetchAccount(Decimal pageNumber ,Integer recordToDisply) {
Integer pageSize = recordToDisply;
Integer offset = ((Integer)pageNumber - 1) * pageSize;
// create a instance of wrapper class.
AccountPagerWrapper obj = new AccountPagerWrapper();
// set the pageSize,Page(Number), total records and accounts List(using OFFSET)
obj.pageSize = pageSize;
obj.page = (Integer) pageNumber;
obj.total = [SELECT count() FROM account];
obj.accounts = [SELECT Id, Name,Phone,Email_ID__c FROM Account ORDER BY Name LIMIT :recordToDisply OFFSET :offset];
// return the wrapper class instance .
return obj;
}
// create a wrapper class with @AuraEnabled Properties
public class AccountPagerWrapper {
@AuraEnabled public Integer pageSize {get;set;}
@AuraEnabled public Integer page {get;set;}
@AuraEnabled public Integer total {get;set;}
@AuraEnabled public List<Account> accounts {get;set;}
}
}
=====================================================================================
Thanks & Regards
Venakt
I implemented a DataTable in lightning component with lightning:datatable tag.I need to check only one check box at a time and when i checked that check box i need to get that record id into URL.i have one image above the my datatable. When click on that image it should navigate to another compoent with the checked RecordId.
Please help me on this... Thanks in advance
Refence Code:
My Refence code is
Component:
<aura:component controller="DataTableWithPagenation">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="Accounts" type="Account[]"/>
<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="mycolumns" type="List"/>
<div class="slds-m-around_small">
<div class="slds-page-header" role="banner">
<p class="slds-page-header__title slds-truncate">{!v.total} Accounts • page {!v.page} / {!v.pages}</p>
<ui:inputSelect aura:id="recordSize" label="Display Record Per Page: " change="{!c.onSelectChange}">
<ui:inputSelectOption text="10" label="10" value="true"/>
<ui:inputSelectOption text="15" label="15"/>
<ui:inputSelectOption text="20" label="20"/>
</ui:inputSelect>
</div>
<p class="slds-p-horizontal_small slds-box">
<lightning:datatable data="{!v.Accounts}" columns="{! v.mycolumns }" keyField="id" />
</p>
<div class="slds-align_absolute-center">
<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>
<!-- <table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="Name">Account Name</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.Accounts}" var="account">
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="{!account.Name}">{!account.Name}</div>
</th>
</tr>
</aura:iteration>
</tbody>
</table>-->
</div>
</aura:component>
===============================================================
controller.js
({
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
var page = component.get("v.page") || 1;
// get the select option (drop-down) values.
var recordToDisply = component.find("recordSize").get("v.value");
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name', type: 'Name',sortable:'true'},
{label: 'Phone', fieldName: 'Phone', type: 'Phone',sortable:'true'},
{label: 'Email ID', fieldName: 'Email_ID__c', type: 'Email',sortable:'true'}
]);
// call the helper function
helper.getAccounts(component, page, recordToDisply);
},
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.getAccounts(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.getAccounts(component, page, recordToDisply);
},
})
===============================================================================
helper.js
({
getAccounts: function(component, page, recordToDisply) {
// create a server side action.
var action = component.get("c.fetchAccount");
// 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.Accounts", result.accounts);
component.set("v.page", result.page);
component.set("v.total", result.total);
component.set("v.pages", Math.ceil(result.total / recordToDisply));
});
// enqueue the action
$A.enqueueAction(action);
}
})
===================================================
Apex controller:
public with sharing class DataTableWithPagenation {
@AuraEnabled
public static AccountPagerWrapper fetchAccount(Decimal pageNumber ,Integer recordToDisply) {
Integer pageSize = recordToDisply;
Integer offset = ((Integer)pageNumber - 1) * pageSize;
// create a instance of wrapper class.
AccountPagerWrapper obj = new AccountPagerWrapper();
// set the pageSize,Page(Number), total records and accounts List(using OFFSET)
obj.pageSize = pageSize;
obj.page = (Integer) pageNumber;
obj.total = [SELECT count() FROM account];
obj.accounts = [SELECT Id, Name,Phone,Email_ID__c FROM Account ORDER BY Name LIMIT :recordToDisply OFFSET :offset];
// return the wrapper class instance .
return obj;
}
// create a wrapper class with @AuraEnabled Properties
public class AccountPagerWrapper {
@AuraEnabled public Integer pageSize {get;set;}
@AuraEnabled public Integer page {get;set;}
@AuraEnabled public Integer total {get;set;}
@AuraEnabled public List<Account> accounts {get;set;}
}
}
=====================================================================================
Thanks & Regards
Venakt
----Controller--------------------
Thanks for your quick responce it is working fine but having one problem. That is when i click on next page the check boxes going to be disabled, not able to check another one.Please kindly take a look into it.Actually i am very new to Lightning and it is very priority take to me.
Thanks in advance
Please find the reference Image:
Thanks&Regards
Venkat.