You need to sign in to do that
Don't have an account?
Amlan Maiti
Lightning datatable -add filter within search
Hi All,
I have a lightning serach compoennt which query from salesforce and show it in a lightning datatble. I have a search textbox in the serach page which basically searchs within the results return to filtered data. I have tried implementing it by searching each value from the Jason string which resulted 2 for loops. In our org , 2000 rows can be returned first and the result needs to be filtered later. Problem with the for loops are that it makes the page unresponsive.
Here is my below js method which i have already tried. (3 methods).
I have a lightning serach compoennt which query from salesforce and show it in a lightning datatble. I have a search textbox in the serach page which basically searchs within the results return to filtered data. I have tried implementing it by searching each value from the Jason string which resulted 2 for loops. In our org , 2000 rows can be returned first and the result needs to be filtered later. Problem with the for loops are that it makes the page unresponsive.
Here is my below js method which i have already tried. (3 methods).
findByName: function(component,event,helper){ var searchKey = event.getParam("searchKey"); var jsonString = component.get("v.tableData"); const jsonStringAll = component.get("v.tableDataAll"); //1st method which couldn't identify the row names as multiple objects var data = component.get("v.tableDataAll"), term = event.getParam("searchKey"), results = data, regex; try { regex = new RegExp(term, "i"); // filter checks each row, constructs new array where function returns true results = data.filter(row => regex.test(row.Asset.Name) /* || regex.test(row.Contact.Name) || regex.test(row.Contact.Contact_Type__c) || regex.test(row.AssetContactRoles__c.Role__c) || regex.test(row.AssetContactRoles__c.End_Date__c)|| regex.test(row.Contact.Phone)|| regex.test(row.Asset.CCT_Contact_Center_BU__c)|| regex.test(row.Asset.Product2.Name)|| regex.test(row.Asset.Selling_Code__r.Name)|| regex.test(row.Asset.Dealer_Account_Number__c)|| regex.test(Asset.Asset_Mailing_Address__c) */ ); } catch (e) { // invalid regex, use full list console.log(e); } component.set("v.tableData",results); //2nd method which is by altering JSON, page becomes unresponsive. /*var objects = []; component.set("v.tableData", ''); for (var i in jsonStringAll) { var key = i; var val = jsonStringAll[i]; for(var j in val){ var sub_key = j; var sub_val = val[j]; var keyValueJson = val[sub_key]; if(keyValueJson !== null) keyValueJson = keyValueJson.toLowerCase(); if(searchKey !== null) searchKey = searchKey.toLowerCase(); if(keyValueJson.includes(searchKey)){ objects.push(val); component.set("v.tableData",objects); break; } } } */ //3rd method by hitting server, gets out of memory /*var action = component.get("c.findByName"); action.setParams({ "searchKey": searchKey, "jsonString" : JSON.stringify(jsonStringAll) }); action.setCallback(this, function(response) { if(!$A.util.isEmpty(searchKey)){ component.set("v.tableData", response.getReturnValue()); component.set("v.isSearching", false); } else{ component.set("v.tableData", component.get("v.tableDataAll")); component.set("v.isSearching", false); } }); $A.enqueueAction(action); */ }
JSON Sample: [{"Contact.Id":"0031f000004ONXDAA4","Asset.Id":"02i1f000000oVZLAA2","AssetContactRoles__c.Id":"a1G1f000002TNlrEAG","Asset.Name":"1116742","Contact.Name":"Carmela Mccarte","Contact.Contact_Type__c":"Customer","AssetContactRoles__c.Role__c":"Joint Owner","AssetContactRoles__c.End_Date__c":"","Contact.Phone":"","Asset.CCT_Contact_Center_BU__c":"MLB","Asset.Product2.Name":"Manulife Bank - Manulife One Account","Asset.Selling_Code__r.Name":"961865","Asset.Dealer_Account_Number__c":"","Asset.Asset_Mailing_Address__c":"Canada,"},{"Contact.Id":"0031f0000046RjwAAE","Asset.Id":"02i1f000000oVZLAA2","AssetContactRoles__c.Id":"a1G1f000002ayBMEAY","Asset.Name":"1116742","Contact.Name":"Barnard B Ball","Contact.Contact_Type__c":"Advisor","AssetContactRoles__c.Role__c":"","AssetContactRoles__c.End_Date__c":"","Contact.Phone":"(518) 719-4653","Asset.CCT_Contact_Center_BU__c":"MLB","Asset.Product2.Name":"Manulife Bank - Manulife One Account","Asset.Selling_Code__r.Name":"961865","Asset.Dealer_Account_Number__c":"","Asset.Asset_Mailing_Address__c":"Canada,"}]