Individual Column Filtering not working for first column

rein

Hello,
I have a datatable with individual column filters. However, it the filtering on the first column isn't working. Can anyone please help how to solve this? Thank you in advance.

var tblReport={};
    var table;
    var tableCont = {
        "column_headers" : [ 
            "ID", "NAME", "POSITION", "ADDRESS"
        ]
    };
    var obj = new Object();
    function createTbl(wrapper){
        wrapper.empty();
        wrapper.append(
        $("<table/>").append($("<thead/>"), $("<tfoot/>"))
    );

        var row = $("<tr/>");
        $.each(tableCont["column_headers"], function(i, val) {
            row.append($("<th/>").text(val.replace(/\_/g," ")));
        });
        $("table",wrapper).find("thead, tfoot").append(row);

        return $("table",wrapper);
    }

    function displayData(){

        var wrapper = $(".tbl-wrapper");
        var dataObj = new Object();
        dataObj.cols = tableCont["column_headers"];

            tblReport = createTbl(wrapper);

            var columns = [];
            $.each(tableCont["column_headers"],function(k,val){
                columns.push({"data" : val});
            });

            table = tblReport.DataTable({
                "order": [[4, "desc"]],
                "serverSide": true,
                "processing" : true,
                "select": {
                    "style": "multi+shift"
                },
                "language": {
                    "processing": '<b>Loading data...</b>'
                },
                "deferRender": true,
                "destroy": true,
                "ajax": { 
                    "url" : "getTableData", 
                    "type": "POST",
                    "data": function ( d ) {
                        d.jsonData = JSON.stringify(dataObj);
                    },
                    "cache": false
                },
                "fixedColumns":   {
                    "leftColumns": 1
                },
                "columns" : columns,
                "columnDefs": [
                    {"data": undefined , "defaultContent": "", "targets": "_all"},
                    {"targets": [ 0 ], "searchable": false, "visible": false}
                ],
                "drawCallback" : function(){
                    this.api().columns().every(function(){
                        var column = this;
                        var width = $(column.footer()).width() - 4;
                        $(".colfilter",column.footer()).css("width",width+"px");
                    });
                },
                "initComplete": function(){
                    this.api().columns().every(function(){
                        var column = this;
                        var width = $(column.footer()).width() - 4;
                        $(column.footer()).empty().append(
                        $('<input type="text" class="colfilter" style="width:'+width+'px" />')
                        .on('keyup change', function(e){
                            if(e.keyCode == 13 && column.search() !== this.value){
                                column.search(this.value).draw();
                            }
                        })
                        .on('blur', function(){
                            if(column.search() !== this.value){
                                column.search(this.value).draw();
                            }
                        })
                    )
                    });
                }
            })
        );
    }

rein

Hi,
I found that this happens because of the fixedColumn not cloning the event listener of the input element, similar to this: Search don't work after use fixedColumn
Any idea how to solve this?

rein

Found a solution/work-around in SO.