DataTables пользовательских визуализации и пользовательские фильтры

Question

Я использую DataTables начать таблицу, и передать столбец визуализатор на конструкторах, как это:

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; 
    } 
); 

Однако я сталкиваясь с проблемой, что пользовательские средствами визуализации Drops данных из объекта данных и пользовательские фильтры console.log (данные) линия на самом деле возвращает строку с пустым значением, хотя значение существует там ... и я даже не могу фильтровать.

Я действительно зациклен на том, как это решить ... Есть ли способ применить пользовательский фильтр любым другим способом?

Answer 1

Я слишком рано подпрыгнул с корабля. Эта проблема уже ответил на DataTables форумах: 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>'); 
    } 
}); 

Затем фильтр работает отлично и данные не удаляются.