Event-Handler für aktive/nicht-aktive YADCF-Filter

Question

Ich verwende Datatables 1.10 und YADCF 0.8.9.β.24.

Meine Filtereingänge werden in einem Dropdown-Menü in jedem Tabellenkopf th angezeigt. Ich möchte ein Active-Filter-Icon in der th zeigen/verstecken, wo ein Filter angewendet wird, aber ich weiß nicht, wie ich richtig auf jedes Änderung/Auswahl/Entfernen-Ereignis mit den verschiedenen YADCF-Filtertypen reagieren soll YADCF löschen Knopf. (Ich verwende select2, text, range_date und auto_complete).

Was ich versucht:

$('#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'. 

ich mit bestimmten Ereignis hanlers für Select2-Filter (‚Auswählen‘ und ‚entfernt‘) versucht, aber diejenigen, die nicht ausgelöst werden, wenn die YADCF klar Taste.

ich auch versucht:

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. 

So, wie konnte ich auf aktive Filter reagieren, um ein aktives Symbol ein- und ausblenden, wenn der Benutzer jede Spalte filtert?

EDIT: Wie in @ Daniels Antwort vorgeschlagen (danke :), Ich habe versucht, DOMSubtreeModified zu hören:

$('#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, habe ich versucht jetzt jQuerys addClass/removeClass, zu modifizieren, um sie Trigger zu machen einige Ereignisse (wie in this answer vorgeschlagen):

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

wie gesagt, mit diesem letzten Beispiel habe ich das Problem in allen Filtertypen lösen können, aber ‚range_date‘. Die einzige Idee, die ich jetzt habe, ist, wie von @ Daniel vorgeschlagen, YADCF zu modifizieren, um in diesem Fall eine Klasse einzuführen (aus Gründen der Erhaltung möchte ich das vermeiden).

Ich erwartete, dass "Inuse" -Klasse würde auch in range_date Filter hinzugefügt werden. Bei meinem letzten Ansatz würde es reichen. Ist YADCF so konzipiert, diese Klasse nur in einigen Filtertypen einzuführen und nicht in allen? Vielleicht vermisse ich etwas?

Ich würde immer noch eine bessere Lösung zu schätzen wissen, speziell für 'range_date', die ich überhaupt nicht lösen konnte.

Dank

Answer 1

Sie können versuchen, hören Änderungsereignis der Filter dom, weil, wenn der Filter in Gebrauch yadcf eine Klasse inuse zu dem Filter hinzufügt und wenn der Filter, die gelöscht wird die inuse Klasse entfernt wird, wird es funktionieren für die meisten der Filter (außer select2) für select2 können Sie yadcf Patch die inuse Klasse an den Auswahlfilter (nicht die sichtbare, aber das Original, das die select2-offscreen Klasse bekommt, wenn select2 erstellt wird) zum hinzufügen/entfernen

Zum Beispiel

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

Answer 2

Ich weiß, das ist eine alte Frage, aber ich fand nur einen anderen (& einfacher) Weg, dies zu archivieren. Vielleicht hilft es jemand anderem.

Haken einfach auf dem "zeichnen" Ereignis aus der Datentabelle und Add/eine CSS-Klasse entfernen auf oSavedState.columns je ...

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

Erholung css ist ...

arbeiten sollte mit jedes Filter-Plugin oder sogar manuell hinzugefügte Filter.

UPDATE:

Wenn Sie State auf Ihrer Datentabelle nicht, (oder sogar dann - es ist sogar noch kürzer), es könnte besser sein aoPreSearchCols zu verwenden, anstatt 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'); 
       } 
      } 
     }); 
    });