Create button to add a Search filter

[DaveyWaveyParticipant]

Hi,

In the API for the addFilter() method it shows how to create a filter when a button is clicked.

How can this be done when filterMode = ‘simple’?

ie. Is there an easy way to create a ‘simple’ filter, or do I have to build a full filter for each column as indicated in the addfilter() method?

Thanks,
DW

[Peter StoevKeymaster]

Hi DaveyWavey,

It is not necessary to add a filter after a button click. Our sample shows how to add a filter through API. The filtering mode does not matter.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[DaveyWaveyParticipant]

Peter,

I realise I don’t need a button click, but I’m just using it for now to have some control over activation of the filter.

My problem is this…

When filtering is set to ‘simple’ and I manually type something into the Search box, the following data is submitted:

Array
(
    [IDXoperator] => or
    [filtervalue0] => foobar
    [filtercondition0] => EQUAL
    [filteroperator0] => 0
    [filterdatafield0] => IDX
    [NAMEoperator] => or
    [filtervalue1] => foobar
    [filtercondition1] => CONTAINS
    [filteroperator1] => 0
    [filterdatafield1] => NAME
    [ITEMTYPEoperator] => or
    [filtervalue2] => foobar
    [filtercondition2] => CONTAINS
    [filteroperator2] => 0
    [filterdatafield2] => ITEMTYPE
    [MANUFACTURERoperator] => or
    [filtervalue3] => foobar
    [filtercondition3] => CONTAINS
    [filteroperator3] => 0
    [filterdatafield3] => MANUFACTURER
    [filterslength] => 4
    [pagenum] => 0
    [pagesize] => 10
    [_] => 1399627770879
)

So, ‘something’ builds filter conditions for all fields automatically when ‘simple’ filtering is enabled.

My original question was whether it is possible to (create a button) to put a string into the ‘simple’ search box and cause the auto generation of filters for all bound fields?

I can’t see an ‘easy’ way to do what I require, so I have the following code that manually builds a filter for each field in the table:

  $("#dataTable").jqxDataTable(
    {
      // showToolbar: true,
      theme: 'sndb',
      width: '90%',
      serverProcessing: true,
      altrows: true,
      sortable: true,
      columnsResize: true,
      filterable: true,
      filterMode: 'simple',
      pageable: true,
      pageSize: datatable_pagesize,
      pagerMode: 'advanced',
      pagerPosition: 'both',
      pageSizeOptions: ['10','25','50','100','500'],

      source: dataAdapter,
      ready: function () {
        $("#dataTable").jqxDataTable('goToPage', datatable_pagenum);
      },
      columns: [
        { text: 'ID', dataField: 'IDX', width: '5%' },
        { text: 'Title', dataField: 'NAME' },
        { text: 'Type', dataField: 'ITEMTYPE', width: '20%' },
        { text: 'Manufacturer', dataField: 'MANUFACTURER', width: '25%' }
      ]
    }
  );

  // create button to apply filter to dataTable
  $('#jqxbutton').jqxButton({width:200, height:30});
  $('#jqxbutton').click(function () {
    var filtergroup1 = new $.jqx.filter();
    var idx_filter = filtergroup1.createfilter('numericfilter', 'barfoo', 'equal');
    filtergroup1.addfilter(0, idx_filter);

    var filtergroup2 = new $.jqx.filter();
    var str_filter = filtergroup2.createfilter('stringfilter', 'barfoo', 'contains');
    filtergroup2.addfilter(1, str_filter);
    
    $("#dataTable").jqxDataTable('addfilter', 'IDX', filtergroup1);
    $("#dataTable").jqxDataTable('addfilter', 'NAME', filtergroup2);
    $("#dataTable").jqxDataTable('addfilter', 'ITEMTYPE', filtergroup2);
    $("#dataTable").jqxDataTable('addfilter', 'MANUFACTURER', filtergroup2);
    $("#dataTable").jqxDataTable('applyfilters');
  });

which submits the following data:

Array
(
    [IDXoperator] => and
    [filtervalue0] => barfoo
    [filtercondition0] => EQUAL
    [filteroperator0] => 0
    [filterdatafield0] => IDX
    [NAMEoperator] => and
    [filtervalue1] => barfoo
    [filtercondition1] => CONTAINS
    [filteroperator1] => 1
    [filterdatafield1] => NAME
    [ITEMTYPEoperator] => and
    [filtervalue2] => barfoo
    [filtercondition2] => CONTAINS
    [filteroperator2] => 1
    [filterdatafield2] => ITEMTYPE
    [MANUFACTURERoperator] => and
    [filtervalue3] => barfoo
    [filtercondition3] => CONTAINS
    [filteroperator3] => 1
    [filterdatafield3] => MANUFACTURER
    [filterslength] => 4
    [pagenum] => 0
    [pagesize] => 10
    [_] => 1399628374006
)

There’s two ‘problems’ with the code I currently have:

1. I am having to filter each field individually (which is going to be a pain for wider tabled of say 20 columns), whereas the ‘simple’ searchbox auto-applies the filter to all existing columns. Is there a way to fill the ‘simple’ searchbox from code and activate the search event?
2. The ‘operators’ are different in the two approaches…maybe a bug?…
   • In the ‘simple’ data, the [FIELD]operators have values of OR with filteroperatorX fields having a value of 0.
   • In my manual filter, the [FIELD]operators have values of AND with filteroperatorX fields having a value of 0 or 1 as per my code setting.

You can see from my code, that regardless of what value (0 or 1) is fed to filtergroupX.addfilter() as the first parameter, it has no effect on the [FIELD]operator value which is always and.

[Author]

Posts