数据表自定义的渲染和自定义过滤器

Question

我用数据表来启动一个表，并在构造函数传递列渲染器，因为这：

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

我已经跳得太早了。这个问题已经回答了在数据表论坛：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>'); 
    } 
}); 

然后过滤器工作正常，没有数据被丢弃。