Hello Everyone,
On the lighting component/VF page, we usually make a server call to search the records in the table. Because the concept of Lightning Component development is based on reducing server calls, I demonstrated here how we can filter/search records at the client-side in this lightning component.
Component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component controller="ListComponentCntrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > | |
| <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> | |
| <aura:attribute name="data" type="Contact[]" /> | |
| <aura:attribute name="UnfilteredData" type="Contact[]" /> | |
| <aura:attribute name="filter" type="String" /> | |
| <aura:handler name="change" value="{!v.filter}" action="{!c.doFilter}" /> | |
| <div class="slds-page-header">My Contacts</div> | |
| <lightning:input name="x" value="{!v.filter}" label="Filter" placeholder="Search Contact by "/> | |
| <table class="slds-table slds-table--bordered"> | |
| <thead> | |
| <tr> | |
| <th>Id</th> | |
| <th>Name</th> | |
| <th>Email</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <aura:iteration items="{!v.data}" var="row" indexVar="rowIndex"> | |
| <tr> | |
| <td>{!row.Id}</td> | |
| <td>{!row.Name}</td> | |
| <td>{!row.Email}</td> | |
| </tr> | |
| </aura:iteration> | |
| </tbody> | |
| </table> | |
| </aura:component> |
JS Controller.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| doInit :function(component,event,helper){ | |
| // Apex method definition | |
| var action = component.get("c.loadData"); | |
| // callbak function | |
| action.setCallback(this,function(response){ | |
| //get state | |
| var state = response.getState(); | |
| // check if state is 'SUCCESS' | |
| if(state == 'SUCCESS'){ | |
| var result = response.getReturnValue(); | |
| //set value to "UnfilteredData" attaribute | |
| component.set("v.UnfilteredData",result); | |
| console.log(result); | |
| // set value to "data" attaribute | |
| component.set("v.data",result); | |
| }else{ | |
| console.log('something bad happend! '); | |
| } | |
| }); | |
| // put the action into queue for server call. | |
| $A.enqueueAction(action); | |
| }, | |
| doFilter: function(component, event, helper) { | |
| //calling helper | |
| helper.FilterRecords(component); | |
| } | |
| }) |
JS Helper Controller.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| FilterRecords: function(component) { | |
| //data showing in table | |
| var data = component.get("v.data"); | |
| // all data featched from apex when component loaded | |
| var allData = component.get("v.UnfilteredData"); | |
| //Search tems | |
| var searchKey = component.get("v.filter"); | |
| // check is data is not undefined and its lenght is greater than 0 | |
| if(data!=undefined || data.length>0){ | |
| // filter method create a new array tha pass the test (provided as function) | |
| var filtereddata = allData.filter(word => (!searchKey) || word.Name.toLowerCase().indexOf(searchKey.toLowerCase()) > -1); | |
| console.log('** '+filtereddata); | |
| } | |
| // set new filtered array value to data showing in the table. | |
| component.set("v.data", filtereddata); | |
| // check if searchKey is blank | |
| if(searchKey==''){ | |
| // set unfiltered data to data in the table. | |
| component.set("v.data",component.get("v.UnfilteredData")); | |
| } | |
| } | |
| }) |
Apex Controller.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class ListComponentCntrl { | |
| @AuraEnabled | |
| public static List<Contact> loadData(){ | |
| List<Contact> conList = [select Id,Name,Email from Contact order by Name asc]; | |
| return conList; | |
| } | |
| } |
Hope this blog post helps many.
Happy Coding… 🙂
Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
can you please explain how the line no.12 of helper class is working
it throws error if a text has special characters and it is searched