활성/비활성 YADCF 필터에 대한 이벤트 핸들러

Question

데이터 테이블 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'. 

내가 선택 2 필터 ('선택'과 '제거')에 대한 특정 이벤트 hanlers로하려고했으나 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. 

는 어떻게 표시하고 사용자가 각 열을 필터링 할 때 활성 아이콘을 숨길 능동 필터에 반응 할 수 있을까?

편집 : 나는 그들을 트리거하기 위해, jQuery의 addClass/removeClass을 수정하기 위해 지금 노력,

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

김을 : 다니엘의 대답 @에서 제안한 것처럼 (나는 DOMSubtreeModified을 청취하려고 :) 감사합니다 (로 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. 

As이 마지막 예제와 나는 모든 필터 유형의 문제가 있지만, 'range_date'를 해결할 수 말했다. @Daniel이 제안한대로, YADCF를 수정하여이 클래스에 몇 가지 클래스를 도입하는 유일한 아이디어가 있습니다 (이를 피하기 위해 manteinance 이유로 인해).

나는 'inuse'클래스가 range_date 필터에도 추가 될 것으로 예상했다. 마지막 접근 방식으로 트릭을 수행합니다. YADCF는 어떤 필터 유형에 대해서만이 클래스를 소개하고 모든 필터 유형에 대해서 소개하는 것이 아닙니다. 어쩌면 내가 뭔가를 놓친거야?

나는 특히 해결할 수없는 'range_date'를 위해이 문제를 해결하는 더 좋은 해결책을 고맙게 생각합니다.

감사

필터가 inuse 클래스가 제거되고 해제 될 때 사용 yadcf의 필터는 필터에 클래스 inuse를 추가하고 때 때문에 필터의 변경 이벤트는 DOM들을 시도 할 수

Answer 1

, 그것은 작동합니다 select2에 대한 대부분의 필터 (select2 제외)의 경우 yadcf를 패치하여 inuse 클래스를 선택 필터에 추가/제거 할 수 있습니다 (select2가 생성 될 때 select2-offscreen 클래스를 가져 오는 원래 필터는 표시되지 않음)

예 :

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

Answer 2

나는 이것이 오래된 질문이라는 것을 알고 있지만, 이것을 보관하는 방법이 다른 것 (&)을 발견했다. 아마도 다른 사람을 도울 수 있습니다.

그냥

사용하여 작동합니다 ...

$('#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입니다 ... oSavedState.columns에 따라 CSS 클래스를 제거/DataTable의에서 "그리기"이벤트에 끼어 추가 모든 필터 플러그인 또는 심지어 수동으로 추가 된 필터.

UPDATE :

당신이 당신의 데이터 테이블에 stateSave를 사용하지 않는 (또는 다음 - 그것도 짧은이다) 경우가 oSavedState.columns 대신 aoPreSearchCols를 사용하는 것이 더 좋을 수도 :

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