Tabulator: Global filter which searches all columns?

Created on 7 Aug 2017 · 4Comments · Source: olifolkerd/tabulator

How can I apply a global filter to all columns?

I expected setFilter to have an optional 'field' parameter, but its mandatory.

I know I can add a filter for each column, but these filters are "AND" (so the keyword should be found in each of the columns) in stead of "OR" (row is displayed if keyword appears in one of the columns).

Question - Ask On Stack Overflow

Source

koosvanderkolk

👍3

Most helpful comment

Hey,

Thanks for getting in touch,

You could use a custom filter function for this:

//custom filter function
function matchAny(data, filterParams){
    //data - the data for the row being filtered
    //filterParams - params object passed to the filter

    var match = false;

    for(var key in data){
        if(data[key] == filterParams.value){
            match = true;
        }
    }

    return match;
}

//set filter to custom function
$("#example-table").tabulator("setFilter", matchAny, {value:5});

Let me know if that helps.

Cheers

Oli

olifolkerd on 7 Aug 2017

👍4

All 4 comments

Hey,

Thanks for getting in touch,

You could use a custom filter function for this:

//custom filter function
function matchAny(data, filterParams){
    //data - the data for the row being filtered
    //filterParams - params object passed to the filter

    var match = false;

    for(var key in data){
        if(data[key] == filterParams.value){
            match = true;
        }
    }

    return match;
}

//set filter to custom function
$("#example-table").tabulator("setFilter", matchAny, {value:5});

Let me know if that helps.

Cheers

Oli

olifolkerd on 7 Aug 2017

👍4

If you want to start searching while you are writting the "if" would be:

 if (JSON.stringify(data[key]).search(filterParams.value) != -1) {
match = true; 
}

And this would be for update the filter each you write in the input text, and reset it if there is no text:


          $("#input-text").keyup(function () {
            table.setFilter(matchAny, { value: $("#input-text").val() });
            if ($("#input-text").val() == " "){
              table.clearFilter()
            }

wolfygit on 28 Feb 2019

Here is a version that can take optional columns (the column specs or columns that should be searched only). Also has a flag to search starting with only .. by default it searches it all. Of course case insensitive. Just a quick set of updates to maybe help others.


function matchAny(data, filterParams) {
    var checkVal = filterParams.value.toLowerCase();
    var tmpIsCols = Array.isArray(filterParams.columns);
    var tmpKeyList = data;
    if( tmpIsCols ){
      tmpKeyList = {};
      for( var iPos in filterParams.columns){
        var tmpCol = filterParams.columns[iPos];
        var tmpKey = tmpCol.field;
        if( tmpKey ){
          tmpKeyList[tmpKey] = true;  
        }
      }
    }

    var match = false;
    var key = '';
    if( filterParams.startsWith === true ){
      for ( key in tmpKeyList) {
        if (data[key].toLowerCase().indexOf(checkVal) === 0) {
          match = true;
          break;
        }
      }  
    } else {
      for ( key in tmpKeyList) {
        if (data[key].toLowerCase().indexOf(checkVal) > -1) {
          match = true;
          break;
        }
      }  
    }
    return match;
  }


Then to call it using ...
this.mainTableEl.tabulator("setFilter", matchAny, {columns: this.columnSpecs, value:tmpSS, startsWith: true});

.. or ..

this.mainTable.setFilter( matchAny, {columns: this.columnSpecs, value:tmpSS, startsWith: false});