Question

我正在使用Datatables 1.10和YADCF 0.8.9.beta.24。

我的过滤器输入显示在每个表头th内的下拉菜单中。我想在应用过滤器的th中显示/隐藏活动过滤器图标，但我不知道如何使用不同的YADCF过滤器对任何更改/选择/移除事件做出正确反应类型，特别是YADCF清除按钮。（我使用select2，text，range_date和auto_complete）。

我尝试了什么：

$('#my-table thead').on('change', function(e) {
  if( $(e.target).val() ) {
    $(e.target).closest('th').addClass('filtered_col');
  } else {
    $(e.target).closest('th').removeClass('filtered_col');
  }
});

//Change event triggers when selecting with 'select2' 
//and when removing items with Select2 remove button, 
//works also selecting with 'auto_complete' filters 
//but not whith any YADCF clear button 
//or when selecting with type 'text' or 'range_date'.

我尝试使用针对Select2过滤器的特定事件处理程序（＆＃39;选择＆＃39;以及＆＃39;删除＆＃39;），但在使用YADCF清除按钮时不会触发这些事件。

我也尝试过：

oTable.on( 'search.dt', function() {
    $(this).find('th').each(function() {
      if ( $(this).find('.select2-search-choice').length || $(this).find('.inuse').length ) {
        $(this).addClass('filtered_col');
      } else {
        $(this).removeClass('filtered_col');
      }
    });
});

//It works selecting with 'auto_complete' and with 'text' types.
//and with respective YADCF Clear button.
//also selecting with 'select2' type and clearing with Select2 clear button,
//but NOT clearing select2 with YADCF clear button 
//'range_date' is not being targeted here.

那么，当用户过滤每一列时，我如何对活动过滤器作出反应以显示和隐藏活动图标？

编辑：正如@ Daniel的回答（谢谢:)，我试着听DOMSubtreeModified：

  $('#main_container').find('.yadcf-filter-wrapper').bind('DOMSubtreeModified', function(e) {
    if( $(e.target).closest('th').find('.select2-search-choice').length || $(e.target).closest('th').find('.inuse').length ) {
      $(e.target).closest('th').addClass('filtered_col');
    } else {
      $(e.target).closest('th').removeClass('filtered_col');
    }

  });
  //Event is only firing with 'select2' filtering and clearing
  //No other filter types are firing this event, although one CSS class is being added in 'text' filters.

Soo，我现在尝试修改jquery＆＃39; addClass / removeClass，让它们触发一些事件（如this answer中所示）：

  (function(){
    var originalAddClass = jQuery.fn.addClass;
    var originalRmvClass = jQuery.fn.removeClass;
    jQuery.fn.addClass = function(){
      // Execute the original method.
      var result = originalAddClass.apply( this, arguments );
      // trigger a custom event
      jQuery(this).trigger('cssClassAdded');
      // return the original result
      return result;
    }
    jQuery.fn.removeClass = function(){
      var result = originalRmvClass.apply( this, arguments );
      jQuery(this).trigger('cssClassRmvd');
      return result;
    }
  })();

  // And then..
  $(function() {
    $('.yadcf-filter-wrapper').on('cssClassAdded', function(){ 
      if( $(this).closest('th').find('.select2-search-choice').length || $(this).closest('th').find('.inuse').length ) {
        $(this).closest('th').find('.fa-filter').css('display', 'block');
      }
    });
    $('.yadcf-filter-wrapper').on('cssClassRmvd', function(){ 
      if( !$(this).closest('th').find('.select2-search-choice').length && !$(this).closest('th').find('.inuse').length ) {
        $(this).closest('th').find('.fa-filter').css('display', 'none');
      }
    });
  });
  //This is the best approach, since is working with 'text', 'select2' and 'auto_complete', with both filtering and clearing actions.
  //'range_date' is the only one I still need to cover.

如上所述，在最后一个示例中，我可以解决所有过滤器类型中的问题，但是＆＃39; range_date＆＃39;。正如@Daniel所建议的那样，我现在唯一的想法就是修改YADCF以在这种情况下引入一些类（出于自然原因，我想避免这种情况）。

我希望＆＃39; inuse＆＃39;我会在range_date过滤器中添加类。用我的最后一种方法可以解决这个问题。 YADCF是如此设计的，只在某些过滤器类型中引入此类而不是在所有过滤器类型中引入此类？也许我错过了什么？

我仍然希望有更好的解决方案来解决这个问题，特别是对于＆＃39; range_date＆＃39;，我根本无法解决这个问题。

由于

Answer 1

您可以尝试侦听过滤器的dom change事件，因为当使用过滤器时，yadcf会向过滤器添加一个类inuse，并且当过滤器被清除时，inuse类将被删除，将适用于select2的大多数过滤器（select2除外），您可以修补yadcf以将inuse类添加/移除到选择过滤器（不是可见的过滤器，而是获取select2-offscreen的原始过滤器正在创建select2时的类）

例如

$('.yadcf-filter').bind('DOMSubtreeModified', function(e) {
      alert('class changed');
});

Answer 2

我知道这是一个老问题，但我发现了一种不同的（和更简单的）存档方式。也许它可以帮助别人。

只需挂钩数据表中的“draw”事件，然后根据oSavedState.columns添加/删除css类......

    $('#my-table').on('draw.dt', function (e, oSettings) {
            var th = $('tr th',this); // find all TH elements of current table

            $.each(oSettings.oSavedState.columns, function( index, col ) {
                if (th.length > index){
                    if (col.search && col.search.search != ""){ // filter is active
                        $(th[index]).addClass('filtered_col'); // add class to col's TH
                    } else {
                        $(th[index]).removeClass('filtered_col'); // remove class from col's TH
                    }
                }
            });
        });

休息是css ......

应该使用任何过滤器插件，甚至手动添加过滤器。

更新：

如果你没有在数据表上使用stateSave，（或者甚至那么 - 它甚至更短），最好使用aoPreSearchCols而不是oSavedState.columns：

    $('#my-table').on( 'draw.dt', function (e,oSettings) {
        var th = $('tr th',this);
        $.each(oSettings.aoPreSearchCols, function( index, search ) {
            if (th.length > index){
                if (search.sSearch != ""){
                    $(th[index]).addClass('col-filtered');
                } else {
                    $(th[index]).removeClass('col-filtered');
                }
            }
        });
    });

活动/非活动YADCF过滤器的事件处理程序

2 个答案: