使用示例 TS 文件进行过滤
(https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts)
作为基础,我能够成功地使其动态过滤所有列(它将过滤所有列,而无需指定它们)。我已经包含了我认为是其工作所需的所有必要部分,但也尽可能地精简了代码,以使其更易于理解。
HTML
<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]].toString().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;
}