Datables Searching / Filtering with rendered data

Question

I am trying to apply filtering to a dataTables table using select boxes. I found the following code which allows me to setup the select boxes and filter based on the column data:

https://datatables.net/examples/api/multi_filter_select.html

This code worked perfectly, however I am now using the render method to pull all the columns together into one. We are doing this so we can style each row to create a single 'Ticket'.

Unfortunately now the filtering does not work. I imagine it may be a result of the columns no longer displaying but would appreciate some direction and help :)

Current Code:

$('#ticket_list').DataTable( {

  "columnDefs": [
    {
        "render": function ( data, type, row ) {
            return '<span class="client-data"> ' + data + ' </span>' 
                + '<span class="priority-data"> ' + row[1] + ' </span>' 
                + '<span class="status-data"> ' + row[2] + ' </span>' 
                + '<div class="subject-data"> ' + row[3] + ' </div>'
                + '<i class="fa fa-user"></i><span class="agent-data"> ' + row[4] + ' </span>'
                + '<span class="date-data"> ' + row[5] + ' </span>';
        },
        "targets": 0
    },        
    { "visible": false, "targets": [ 1,2,3,4,5 ]}
    ],     
    "columns": [
        { "title": "" }
    ],
    "pageLength": setPageLength(),
    "dom": '<"#search-box"f> rt <"#pagination.col-xs-12"p> <"#table-information.col-xs-12"i>',
    language: {
        search: "_INPUT_",
        searchPlaceholder: "Search"
    },        
    initComplete: function () {
        this.api().columns([0,1,2]).every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( ".ticket-filtering" )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    console.log(val)
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    },
} );

Answer 1

CAUSE

You render function returns HTML string unconditionally disregarding the type argument but this function is used to get the data for multiple purposes: displaying, ordering, filtering, type detection.

SOLUTION

Use type detection in render function and only return HTML when data is needed to be displayed (type === 'display').

"render": function ( data, type, row ) {
   if(type === 'display'){
      data = '<span class="client-data"> ' + data + ' </span>' 
         + '<span class="priority-data"> ' + row[1] + ' </span>' 
         + '<span class="status-data"> ' + row[2] + ' </span>' 
         + '<div class="subject-data"> ' + row[3] + ' </div>'
         + '<i class="fa fa-user"></i><span class="agent-data"> ' + row[4] + ' </span>'
         + '<span class="date-data"> ' + row[5] + ' </span>';
   }

   return data;
},

DEMO

See this jsFiddle for code and demonstration.