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

Question

Я использую Datatables 1.10 и YADCF 0.8.9.b.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'. 

Я попытался с конкретным hanlers событий для ВЫБ.2 фильтров («Выбор» и «удаленные»), но те, которые не вызываются при помощи кнопки 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. 

Итак, как я мог бы реагировать на активные фильтры, чтобы показать и скрыть активный значок, когда пользователь фильтрует каждый столбец?

EDIT: Как было предложено в @ Ответ Даниила (спасибо :), я пытался слушать 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-х 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. 

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

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

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

Благодаря

Answer 1

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

Например,

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

Answer 2

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

Просто подключите на событии "рисовать" из DataTable и добавить/удалить класс 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 ...

Должно работать с использованием любой фильтр-плагин или даже вручную добавленные фильтры.

UPDATE:

Если вы не используете stateSave на вашем DataTable (или даже тогда - это еще короче), было бы лучше использовать 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'); 
       } 
      } 
     }); 
    });