アクティブ/非アクティブ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'. 

私はSelectセレクトフィルター（「選択」と「削除」）のための特定のイベント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. 

だから、どのように私は、ユーザーが各列をフィルタリングするときにアクティブアイコンを表示し、非表示にするには、アクティブ・フィルタに反応するだろうか？

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. 

スヨン、私はそれらをトリガーにするために、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を修正してこのケースでいくつかのクラスを導入するという唯一のアイデアがあります（これを避けたい理由があるからです）。

range_dateフィルタにも「inuse」クラスが追加されることが予想されました。それは私の最後のアプローチで、トリックを行うだろう。 YADCFは、このクラスをいくつかのフィルタタイプで導入するだけで、すべてではありません。多分私は何かを見逃しているでしょうか？

これを解決するには、特に 'range_date'を解決するための解決策がありましたが、私はまったく解決できませんでした。

おかげ

Answer 1

使用yadcfでたときにフィルタがフィルタにクラスinuseを追加し、フィルターがinuseクラスが削除されているクリアされている場合、それは動作しますので、あなたは、フィルタのDOM変更イベントを聞くことを試みることができますselect2のフィルタの大部分（select2を除く）に対してyadcfをパッチしてinuseクラスをselectフィルタに追加/削除することができます（select2の作成時にselect2-offscreenクラスを取得する元のもの）

たとえば

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

Answer 2

私はこれが古い質問だと知っていますが、これをアーカイブするには別の方法（&）が見つかりました。 他人に役立つかもしれない。

ただ、データテーブルからイベントを「描く」と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で上...

を使用して動作するはずフック任意のフィルタプラグインまたは手動で追加されたフィルタ。

UPDATE：

あなたが（それでもか - それも短いです）、あなたのDataTableに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'); 
       } 
      } 
     }); 
    });