dynamic data-table search

[mthor1979]

I have a situation where we have a search box on a dashboard page, once the search is entered and a link button is clicked, I open a page and populate the data table searchbox, but no search /filter gets applied, is there a way to dynamically trigger the datatable filter?

[paulswan]

try binding your filter using [(ngModel)] and set the value of the model.

[mthor1979]

Thanks for the reply, I have done this and I populate the <input> but no filter happens, maybe I need to wait a little longer before populating, I will try a timeout and some others options, hopefully can get it and report back

[mthor1979]

So I have a little workaround that works pretty good,

problem: need to make the global data-table filter dynamic, a search is entered on another component/card , that value is stored in a service, and when data-table loads, if there is a value then I need to load it in the global filter (done with ngModel, but does not trigger the change event to filter)

solution(could be a better one out there, and I am open to ideas, but this way is working for now)

I basically focus the input, delay a second and then trigger the blur event, that calls the onFieldBlur function

Code: Select all

//dt = dataTable
<input #gb type="text" pInputText placeholder="Filter" [(ngModel)]="dashFilteredSearchData" (blur)="onFieldBlur(gb, dt)">

ngAfterViewInit() {
    this.gb.nativeElement.focus();
    if (this.dashFilteredSearchData) {
      let timeoutId = setTimeout(() => {
        this.gb.nativeElement.blur();
      }, 100);
    }
  }
  
  onFieldBlur(gb, dt) {
    dt.filter(gb.value, gb, 'contains');
  }

hope that helps someone, or sheds light for a better option