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.