Apply a column filter when using a render

georgeforster

I'm using V1.10.19

I have set up a page

http://flywestwind.org/AircraftScenery/newAircraftList.php

The raw data in the table is a Y or an N in the last 5 columns, but I'm using a column render to change the output to an image

columnDefs: 
[
    // Use ClumnDefs to force the formatting of each column
    {
        targets: 4,
        render: function (data, type, row)
        {
            if (data == "Y")
            {
                return '<img src="/Roster/icons/checkmark.gif" alt="checkmark" />';
            }
            else
            {
                return '<img src="/Roster/icons/crossmark.gif" alt="crossmark" />';                                         
            }
        }
    }
]

This is repeated for all the columns and this works perfectly

The filter is applied using this code

initComplete: function () {
    this.api().columns([0, 2, 3, 4, 5, 6, 7, 8]).every( function () {
        var column = this;
        var ColumnIndex = this.index('visible');

        var select = $('<select style="font-size:inherit;"><option value="">All</option></select>')
            .appendTo( $(column.footer()).empty() )
            .on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );

                column
                    .search( val ? '^'+val+'$' : '', true, false )
                    .draw();
            } ); 

        column.data().unique().sort().each( function ( d, j ) {
        var val = $('<div/>').html(d).text();
        select.append( '<option value="' + val + '">' + val + '</option>' );

        } );

        var Cell;
        var jQueryCell;
        var Input;

        Cell = $("#example tfoot tr td").eq(ColumnIndex);
        jQueryCell = $(Cell);

        Input = jQueryCell.find('select');

        Input.children().filter(function(){
            return this.text == Filters[ColumnIndex];
        }).prop('selected', true);

    } );
},

which correctly then shows the Y and N in the drop down, but when I select either a Y or N, no rows are returned

Is this something that should work and if so have I missed something somewhere as I thought that the render only changed what was shown on the screen and didn't affect the source data

kthorngren

You will want to use Orthogonal data for this. Basically you will display the images for the display type. For example:

columnDefs:
[
    // Use ClumnDefs to force the formatting of each column
    {
        targets: 4,
        render: function (data, type, row)
        {
            if (type === 'display') {
              if (data == "Y")
              {
                  return '<img src="/Roster/icons/checkmark.gif" alt="checkmark" />';
              }
              else
              {
                  return '<img src="/Roster/icons/crossmark.gif" alt="crossmark" />';                                        
              }
            }
            return data;
        }
    }
]

I think its syntactically correct

Kevin

georgeforster

Almost, you forgot the trailing else

                                        render: function (data, type, row)
                                        {
                                            if (type === 'display')
                                            {
                                                if (data == "Y")
                                                {
                                                    return '<img src="/Roster/icons/checkmark.gif" alt="checkmark" />';
                                                }
                                                else
                                                {
                                                    return '<img src="/Roster/icons/crossmark.gif" alt="crossmark" />';                                         
                                                }
                                            }
                                            else
                                            {
                                                return data;
                                            }

Thanks for the (almost) solution