एनजीएक्स डेटाटेबल कॉलम फ़िल्टरिंग

Question

लागू करने के लिए मैं इसे बिना किसी किस्मत के काम करने की कोशिश कर रहा हूं। मैं मदद के लिए इन संसाधनों को संदर्भित किया गया है: http://swimlane.github.io/ngx-datatable/#filter
https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts

असल में मैं सिर्फ मेरी फिल्टर एक एकल स्तंभ की तुलना में अधिक करने के लिए लागू करने के लिए अनुमति देना चाहते हैं, हर स्तंभ को संभालने के लिए कोड को लागू करने के बिना। (कुछ datatables 20+ कॉलम है!)

उदाहरण कोड:

//HTML 
    <input type='text' placeholder='Filter' (keyup)='updateFilter($event.target.value)' /> 

    <ngx-datatable 
    class="material" 
    columnMode="force" 
    [columns]="gridProperties.FilteredColumns" 
    [footerHeight]="50" 
    [loadingIndicator]="gridLoadingIndicator" 
    [rows]="filteredList" 
    [scrollbarH]="false" 
    [scrollbarV]="true" 
    [selected]="selectedItem" 
    [selectionType]="'single'" 
    style="min-height:400px;"> 
    </ngx-datatable> 

//TYPESCRIPT 
    public items: Item[]; 

    updateFilter(filterValue) { 
    const lowerValue = filterValue.toLowerCase(); 

    this.filteredList = this.items.filter(item => item.name.toLowerCase().indexOf(lowerValue) !== -1 || !lowerValue); 
    } 

यहाँ मैं स्पष्ट रूप से अभी-अभी अपना आइटम सरणी के 'नाम' संपत्ति के लिए छानने से निपटने कर रहा हूँ। यह बहुत अच्छा काम करता है, लेकिन जैसा कि मैंने उल्लेख किया था, अगर ग्रिड में कई कॉलम हैं तो मैं उन सभी को संभालने के लिए एक विधि चाहता हूं। किसी भी मदद या सुझाव की सराहना की जाती है।

updateFilter(filter: string): void { 

    const val = filter.trim().toLowerCase(); 

    this.filteredList = this.items.slice().filter((item: any) => { 
    let searchStr = ''; 
    for (let i = 0; i < this.gridProperties.FilteredColumns.length; i++) { 
     searchStr += (item[this.gridProperties.FilteredColumns[i]]).toString().toLowerCase(); 
    } 
    return searchStr.indexOf(val) !== -1 || !val; 
    }); 
} 

मैं कोई गलती की नहीं हुआ, तो इसे सही ढंग से काम करना चाहिए:

Answer 1

यहाँ एकाधिक स्तंभों को छानने के साथ अपने कोड का एक उदाहरण है।

Answer 2

एक आधार के रूप छानने (https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts) के लिए उदाहरण टीएस फ़ाइल का उपयोग करना, मैं सफलतापूर्वक यह गतिशील सभी स्तंभों को फ़िल्टर (यह उन्हें निर्दिष्ट करने के लिए आवश्यकता के बिना सभी स्तंभों को फ़िल्टर करते हैं) बनाने के लिए कर रहा था। मैंने इसमें शामिल होने के लिए सभी जरूरी हिस्सों के रूप में जो कुछ भी माना है, उसमें शामिल किया है, लेकिन कोड को उतना ही कम कर दिया जितना मैं इसे समझना आसान बना सकता था।

एचटीएमएल

<ngx-datatable 
#table 
class="material striped scroll-vertical" 
[rows]="data" 
[columns]="cols" 
[columnMode]="'force'" 
[headerHeight]="35" 
[footerHeight]="35" 
[rowHeight]="'auto'" 
[limit]="pageSize" 
[selectionType]="'single'"> 

<input type="text" (keyup)='filterDatatable($event)'> 

टाइपप्रति

cols = [{name:'First Name'},{name:'Last Name'},{name:'Address'}]; 
data = []; 
filteredData = []; 

// dummy data for datatable rows 
dummyData = [ 
    {firstName:'Daenarys',lastName:'Targaryen',address:'Dragonstone'}, 
    {firstName:'Sansa',lastName:'Stark',address:'Winterfell'}, 
    {firstName:'Cersei',lastName:'Lannister',address:'Kings Landing'}, 
    {firstName:'Brienne',lastName:'Tarth',address:'Sapphire Island'}, 
    {firstName:'Lyanna',lastName:'Mormont',address:'Bear Island'}, 
    {firstName:'Margaery',lastName:'Tyrell',address:'Highgarden'} 
] 

ngOnInit(){ 
    // populate datatable rows 
    this.data = this.dummyData; 
    // copy over dataset to empty object 
    this.filteredData = this.dummyData; 
} 

// filters results 
filterDatatable(event){ 
    // get the value of the key pressed and make it lowercase 
    let val = event.target.value.toLowerCase(); 
    // get the amount of columns in the table 
    let colsAmt = this.cols.length; 
    // get the key names of each column in the dataset 
    let keys = Object.keys(this.dummyData[0]); 
    // assign filtered matches to the active datatable 
    this.data = this.filteredData.filter(function(item){ 
    // iterate through each row's column data 
    for (let i=0; i<colsAmt; i++){ 
     // check for a match 
     if (item[keys[i]].toLowerCase().indexOf(val) !== -1 || !val){ 
     // found match, return true to add to result set 
     return true; 
     } 
    } 
    }); 
    // whenever the filter changes, always go back to the first page 
    this.table.offset = 0; 
}