のDataTableカスタムレンダリングし、カスタムフィルタ

Question

私はテーブルを開始し、このようコンストラクタに列レンダラーを渡すためのDataTableを使用してい

：

var table = $('#reportTable').DataTable({ 
    pageLength: 100, 
    columns: [ 
     null, // car name 
     { className: 'al-c' }, // car plate 
     { className: 'al-c' }, // delivery date 
     null, // delivery to 
     { className: 'al-c' }, // collection date 
     null, // collection to 
     null, // client 
     null, // agent 
     null, // contractor 
     null, // contract 
     { type: "num-fmt", className: 'al-r', render: $.fn.dataTable.render.number(',', '.', 0, '', ' €') }, // price 1 
     { type: "num-fmt", className: 'al-r', render: $.fn.dataTable.render.number(',', '.', 0, '', ' €') }, 
     //null,// extra 
     { className: 'al-c', sortable: false, render: function (data, type, row) { 
       var disabled = (data.length >= 1) ? '' : 'disabled'; 
       var buttonCash = '<button class="ui '+disabled+' button paymentType green'+((data=="cash")?'':' basic')+'" data-paymentType="cash"><i class="ui euro icon"></i></button>'; 
       var buttonCC = '<button class="ui '+disabled+' button paymentType blue'+((data=="cc")?'':' basic')+'" data-paymentType="cc"><i class="ui payment icon"></i></button>'; 
       return '<div class="ui mini icon buttons tg-'+disabled+'">'+buttonCash+'<div class="or"></div>'+buttonCC+'</div>'; 
      } 
     } // payment type 
    ] 
}); 

そして、私はまた、支払いタイプにカスタムフィルタを追加したいですよコラム：

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) { 
     var paid = data[12]; // use data for the age column 
     console.log(data); 
     if ( 
      (paidType == 'all') || 
      (paidType == 'paid' && paid != '') || 
      (paidType == 'unpaid' && paid == '') 
     ) { return true; } 
     return false; 
    } 
); 

しかし、私はデータオブジェクトから、カスタムレンダラはデータを廃棄するという問題が発生したことだし、カスタムフィルタにconsole.log（データ）ラインは、実際にもかかわらず、空の値を持つ行を返します。その値はそこに存在し、私はフィルタリングすることもできません。

私は本当にこれを解決する方法を困惑しています...他の方法でカスタムフィルタを適用する方法はありますか？

Answer 1

私は船を早く飛び越えました。この問題は、既にDataTableのフォーラムに答えている：https://datatables.net/forums/discussion/22111/how-to-render-column-with-function-and-set-filter#Comment_63103

をソリューションは、レンダラを使用することではなく、レンダリングの前に呼び出されrowCallbackを処理、など：

var table = $('#reportTable').DataTable({ 
    pageLength: 100, 
    columns: [ 
     null, // car name 
     { className: 'center aligned' }, // car plate 
     { className: 'center aligned' }, // delivery date 
     null, // delivery to 
     { className: 'center aligned' }, // collection date 
     null, // collection to 
     null, // client 
     null, // agent 
     null, // contractor 
     null, // contract 
     { type: "num-fmt", className: 'right aligned', render: $.fn.dataTable.render.number(',', '.', 0, '', ' €') }, // price 1 
     { type: "num-fmt", className: 'right aligned', render: $.fn.dataTable.render.number(',', '.', 0, '', ' €') }, 
     //null,// extra 
     { className: 'center aligned', sortable: false } // payment type 
    ], 
    rowCallback: function(row, data, index) { 
     var disabled = (data[12].length >= 1) ? '' : 'disabled'; 
     var buttonCash = '<button class="ui '+disabled+' button paymentType green'+((data=="cash")?'':' basic')+'" data-paymentType="cash"><i class="ui euro icon"></i></button>'; 
     var buttonCC = '<button class="ui '+disabled+' button paymentType blue'+((data=="cc")?'':' basic')+'" data-paymentType="cc"><i class="ui payment icon"></i></button>'; 
     $('td:eq(12)', row).html('<div class="ui mini icon buttons tg-'+disabled+'">'+buttonCash+'<div class="or"></div>'+buttonCC+'</div>'); 
    } 
}); 

その後、フィルタは正常に動作し、データは破棄されません。