CODEWITHSUNDEEP
javascriptdatatables
GTMeteor
GTMeteor

Reputation: 857

DataTables custom render and custom filter

I'm using DataTables to initiate a table, and pass column renderer on constructors as this :

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

And I'm also want to add a custom filter on the payment type column:

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

However, I'm encountering a problem that the custom renderer DROPS the data, from data object and the custom filter console.log(data) line actually returns the line with an empty value, even though the value exists there... and I can't even filter.

I'm really stumped on how to solve this... Is there a way to apply a custom filter any other way ?

Upvotes: 0

Views: 2385

Answers (1)

GTMeteor
GTMeteor

Reputation: 857

I've jumped the ship too early. This problem is already answered on dataTables forums: https://datatables.net/forums/discussion/22111/how-to-render-column-with-function-and-set-filter#Comment_63103

The solution is not to use a renderer, but process a rowCallback, which is called before rendering, such as:

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

Then the filter works fine and no data is dropped.

Upvotes: 1

Related Questions