Apply Filter then Goto Page thru Code

[DaveyWaveyParticipant]

Hi,

Is it possible through jQuery code to apply a Filter to a table then, after the filter has been applied, go to a specific page of results?

I have the following code, but I think the problem is that it is attempting to apply the goToPage before the dataTable has finished filtering its data.

Any suggestions on what events (or other approaches) may be available in which I can cause the goToPage to fire after the filter results have been processed?

 $("#dataTable").jqxDataTable(
    {
      serverProcessing: true,
      filterable: true,
      filterMode: 'simple',
      pageable: true,
      pageSize: 10,
      pagerMode: 'advanced',
      pagerPosition: 'both',
      pageSizeOptions: ['10','25','50','100','500'],

      source: dataAdapter,
      ready: function () {

      // reapply any filter after dataTable reload (datatable_filter is declared elsewhere and contains search string)
        if (datatable_filter!='') {
          var filtergroup1 = new $.jqx.filter();
          var idx_filter = filtergroup1.createfilter('numericfilter', datatable_filter, 'equal');
          // seems to be a bug in the 'operator' setting, so using 0 for 'or'
          filtergroup1.addfilter(0, idx_filter);

          var filtergroup2 = new $.jqx.filter();
          var str_filter = filtergroup2.createfilter('stringfilter', datatable_filter, 'contains');
          // seems to be a bug in the 'operator' setting, so using 0 for 'or'
          filtergroup2.addfilter(0, 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');

          // also make the 'clear filter' icon visible
          $('.jqx-icon-close').css('display', 'block');
        }

        // return to previous data page (datatable_pagenum declared elsewhere)
        $("#dataTable").jqxDataTable('goToPage', datatable_pagenum);
      },

Thanks,
DW

[Peter StoevKeymaster]

Hi DW,

The provided code will be executed just once, because “ready” is called once the datatable’s rendering has finished. And Yes, with server filtering, the data binding is asynchronous(binding happens with Ajax call by default) so your “goToPage” will not do anything. You should either set async: false of the source object or perform goToPage in the “bindingComplete” event handler of jqxDataTable.

Best Regards,
Peter Stoev

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

[DaveyWaveyParticipant]

Looks like I may have solved it, but any suggestions of better approaches are welcome.

To solve it I introduced a do_goToPage flag variable which has overcome the problem caused by putting the goToPage call in the rendered: callback.

A snippet of the solution…

var do_goToPage = false;

  $("#dataTable").jqxDataTable(
    {
      serverProcessing: true,
      filterable: true,
      filterMode: 'simple',
      pageable: true,
      pageSize: 10,
      pagerMode: 'advanced',
      pagerPosition: 'both',
      pageSizeOptions: ['10','25','50','100','500'],

      source: dataAdapter,
      ready: function () {

        // if a filter existed previously, reapply it now that dataTable is ready
        if (datatable_filter!='') {
          var filtergroup1 = new $.jqx.filter();
          var idx_filter = filtergroup1.createfilter('numericfilter', datatable_filter, 'equal');
          // seems to be a bug in the 'operator' setting, so using 0 for 'or'
          filtergroup1.addfilter(0, idx_filter);

          var filtergroup2 = new $.jqx.filter();
          var str_filter = filtergroup2.createfilter('stringfilter', datatable_filter, 'contains');
          // seems to be a bug in the 'operator' setting, so using 0 for 'or'
          filtergroup2.addfilter(0, 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');

          // also make the 'clear filter' icon visible
          $('.jqx-icon-close').css('display', 'block');

        }

        // flag that we need to return to previous data page
        do_goToPage = true;
      },

      rendered: function () {
        // return to a specific page if relevant
        if (do_goToPage) {
          $("#dataTable").jqxDataTable('goToPage', datatable_pagenum);
          do_goToPage = false;
        }
      },

      columns: [
        { text: 'ID', dataField: 'IDX', width: '5%' },
        { text: 'Title', dataField: 'NAME' },
        { text: 'Type', dataField: 'ITEMTYPE', width: '20%' },
        { text: 'Manufacturer', dataField: 'MANUFACTURER', width: '25%' }
      ]
    }
  );

Why am I doing this?

My dataTable lists items. When an item is clicked, browser goes to a display page with a ‘close’ button. When the close button is clicked I needed to return to the dataTable page but also show the table as it appeared prior to viewing the display page (ie. same page number, same number of rows, same filter applied).

DW

[Peter StoevKeymaster]

Hi DW,

Please, look at my post. Calling “goToPage” which may lead to a new rendering opertion in a callback called “rendered” is not a good idea.

Best Regards,
Peter Stoev

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

[Author]

Posts