Datatable ColResize along with Individual column search and column filter

rathinaganesh

Greetings,

I am trying to use datatables along with individual column search and column visible. I am using the colResize plugin from
https://github.com/Silvacom/colResize
However, I am not able to resize because of the individual column search filter.
Here is my code

// Setup - add a text input to each footer cell
var div_footer = divId+' tfoot th';
$(div_footer).each( function () {
        var title = $(div_footer).eq( $(this).index() ).text();
        $(this).html( '<input type="search" placeholder="Search '+title+'" class="dataTables_filter form-control col-xs-2"/>' );
} );



table = $(divId).DataTable({
        autoWidth: true,
        "pagingType": "simple",
        stateSave: true,
        columns: columns,
        "dom": "T<'col-sm-2'<'profile_list'>><'col-xs-6 col-sm-2'f>Z<'col-xs-6 col-sm-2'C>t<<'col-sm-3'l><'col-sm-3'i><'col-sm-3'p>>",
        "language": { "search": "" },
        //responsive: true,
        scrollX: true,
        "ajax": {
                // "dataType": 'json',
                "url": url,
                "dataSrc": function ( json ) {
                    //Make your callback here.
                    return json.data;
                },
                "type": "GET"
        },
        "oTableTools": {

                "aButtons": [
                        {
                            // "sButtonClass": 'add btn-info btn-xs',
                            "sExtends": "print",
                        },

                        {
                                // "sButtonClass": 'add btn-info btn-xs',
                                "sExtends": "collection",
                                "sButtonText": "Download <i class=\"fa fa-angle-down\"></i>",
                                "aButtons": ["csv", "xls", "pdf"]
                        }
                ]
        },      
        colVis: {
                buttonText: "<span class='glyphicon glyphicon-th'></span>",
                "bRestore": true,
                "activate": "click",
                "label": function ( index, title, th ) {
                        return (index+1) +'. '+ title;
                }
        },
        "colResize": {
                "tableWidthFixed": false
                // "rtl": true
        }
        // colReorder: true
});

//The following will maintain the filters available in the individual column search boxes
var state = table.state.loaded();
if ( state ) {
    table.columns().eq( 0 ).each( function ( colIdx ) {
        var colSearch = state.columns[colIdx].search;

        if ( colSearch.search ) {
            $( 'input', table.column( colIdx ).footer() ).val( colSearch.search );
        }
    } );
    table.draw();
}


// The following will apply the search for each individual column
table.columns().every( function () {
        var column = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            
                if(this.value != null && this.value != undefined){
                    var val = this.value.trim();
                    var arr = val.split('&');
                    var pattern = val;
                    if(arr != null && arr.length>1){
                        pattern = '';
                        pattern = pattern + (arr[i]).trim();
                    }//End of if-loop
                    column
                            .search(pattern, true, false)
                            .draw();
                }
                });
            // }

});    
      

Thanks.

rathinaganesh

Has anyone gone through this issue before? Any pointers or insight will be helpful.

Thanks,
Ganesh

allan

You'd need to direct support questions about that plug-in to its author. It isn't one that I developed and it isn't maintained as part of the DataTables project I'm afraid.

Allan