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, '', '&nbsp;&euro;' ) }, // price 1
        { type: "num-fmt", className: 'al-r', render: $.fn.dataTable.render.number( ',', '.', 0, '', '&nbsp;&euro;' ) },
        //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, '', '&nbsp;&euro;' ) }, // price 1
        { type: "num-fmt", className: 'right aligned', render: $.fn.dataTable.render.number( ',', '.', 0, '', '&nbsp;&euro;' ) },
        //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>' );
    }
});

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

DataTables自定义渲染和自定义过滤器

1 个答案: