Обработчик событий для активных / неактивных фильтров YADCF

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 ("выбор" и "удаление"), но они не запускаются при использовании кнопки очистки 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's Answer (спасибо:), я пытался слушать 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.

Итак, я попытался изменить JQuery addClass / removeClass, чтобы заставить их вызвать некоторые события (как предложено в этом ответе):

  (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.

Как уже говорилось, в этом последнем примере я мог бы решить проблему во всех типах фильтров, кроме 'range_date'. Единственная идея, которая у меня сейчас есть, как предложила @Daniel, - изменить YADCF, чтобы ввести некоторый класс в этом случае (по причинам, связанным с производством, я бы хотел этого избежать).

Я ожидал, что класс 'inuse' также будет добавлен в range_date фильтры. Это помогло бы с моим последним подходом. Неужели YADCF так спроектирован, чтобы вводить этот класс только в некоторые типы фильтров, а не во все? Может я что-то упустил?

Я все еще был бы признателен за лучшее решение для решения этой проблемы, особенно для 'range_date', которое я никак не мог решить.

Спасибо

Answer 1

Я знаю, что это старый вопрос, но я нашел другой (и более простой) способ архивировать это. Может быть, это помогает кому-то еще.

Просто подключите событие "draw" из таблицы данных и добавьте / удалите класс css в зависимости от oSavedState.columns...

    $('#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');
                }
            }
        });
    });

Answer 2

Вы можете попытаться прослушать событие dom change фильтров, потому что при использовании фильтра yadcf добавляет класс inuse к фильтру и когда фильтр очищается inuse класс удаляется, он будет работать для большинства фильтров (кроме select2), для select2 вы можете исправить yadcf, чтобы добавить / удалить inuse класс для фильтра выбора (не видимый, а исходный, который получает select2-offscreen класс, когда создается select2)

Например

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