Column text input filter in headers loose select all functionality in IE
Column text input filter in headers loose select all functionality in IE

I'll try my best to explain this issue i'm having...
I have input text column filtering for my datatable. I've added it to my header instead of my footer, but everything still works. But something strange was happening in IE where I am unable to highlight or select all text in the input. I've tried adding:
CSS:
input{
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
as well as
JQuery:
$(this).select();
but nothing works.
here is a snippet
var table = $('#table')
.on('processing.dt',
function(e, settings, processing) {
if (processing) {
ShowRefreshSpinner();
} else {
HideRefreshSpinner();
}
})
.DataTable({
ajax: "...",
postUrl: "...",
addRecordParams: {
action: "@ModalAction.Add.ToInt()"
},
editRecordParams: {
action: "@ModalAction.Edit.ToInt()"
},
columns: columnHeaders,
scrollY: parseInt($(window).height() * .45),
scrollCollapse: true,
scroller: true,
//fixedColumns: true,
scrollX: true,
colReorder: true,
//ordering: false,
order: [[9, 'asc'], [10, 'asc']],
dom:
"<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-6'B><'col-xs-12 col-sm-6'p>><'row'<'col-md-12't>><'row'<'col-md-6'i>>",
select: 'single',
responsive: false,
stateSave: true,
altEditor: true,
language: {
paginate: {
first: '«',
previous: '‹',
next: '›',
last: '»'
},
aria: {
paginate: {
first: 'First',
previous: 'Previous',
next: 'Next',
last: 'Last'
}
}
},
buttons: [
{
extend: 'selected',
name: 'edit',
text: '<i class="fa fa-lg fa-pencil-square-o edit"></i>'
}, {
extend: 'selected',
text: '<i class="fa fa-lg fa-sitemap children"></i>',
action: function(e, dt, node, config) {
window.parent.location = '...' +
dt.rows({ selected: true }).data()[0].{Id};
}
}, {
extend: 'copy',
text: '<i class="fa fa-lg fa-files-o copy"></i>',
exportOptions: {
columns: ':visible',
orthogonal: null
}
}, {
extend: 'excel',
text: '<i class="fa fa-lg fa-cloud-download excel"></i>',
exportOptions: {
columns: ':visible',
orthogonal: null
}
}, {
extend: 'print',
text: '<i class="fa fa-lg fa-print print"></i>',
exportOptions: {
columns: ':visible',
orthogonal: null
}
}, {
extend: 'colvis',
text: '<i class="fa fa-lg fa-bars colvis"></i>'
}, {
text: '<i class="fa fa-lg fa-eraser erase"></i>',
action: function(e, dt, node, config) {
$("input").val('');
table.columns().search('').draw();
}
//titleAttr: 'Clear Filter'
}
],
columnDefs: [
{
targets: '_all',
orderable: true,
type: 'natural-nohtml'
}, {
targets: 5,
render: $.fn.dataTable.render.ellipsis(85)
}, {
targets: 7,
render: function ( data, type, row ) {
return GetFormattedDate(data);
}
}, {
targets: 18,
render: $.fn.dataTable.render.ellipsis(85)
}
],
initComplete: function() {
var state = this.api().state.loaded();
this.api().columns().every(function(colIdx) {
var colSearch = state ? state.columns[colIdx].search: null;
var column = this;
var value = "";
if (colSearch)
value = colSearch.search;
var title = $(column.header()).text();
$('<br/>').appendTo($(column.header()));
var input = $('<input type="text" class="form-control filter_select" style="width:100%; min-width:120px;" placeholder="Search ' + title + '" value="' + value +'"/>')
.appendTo($(column.header())).on('keyup change',
function () {
var nm = "" + title + ":name";
var index = table.column(nm).index();
table.column(index)
.search(this.value)
.draw();
}).on('click',
function (e) {
//e.preventDefault();
e.stopPropagation();
this.setSelectionRange(0, this.value.length);
}).on('mousedown', function (e) {
//e.preventDefault();
e.stopPropagation();
}).on('focus', function (e) {
//e.preventDefault();
e.stopPropagation();
});
});
table.columns.adjust();
table.responsive.recalc();
},
createdRow: function(row, data, dataIndex) {
var a = data.BusinessRanking;
if (data.BusinessRanking < 1) {
$(row).addClass('warning');
}
}
});
//$('#table thead th').each(function() {
// var title = $('#table thead th').eq($(this).index()).text();
// $(this).html('<input type="text" placeholder="Search ' + title + '" />');
//});
//table.columns().eq(0).each(function(colIdx) {
// $('input', example.column(colIdx).header()).on('keyup change',
// function() {
// example
// .column(colIdx)
// .search(this.value)
// .draw();
// });
// $('input', table.column(colIdx).header()).on('click',
// function(e) {
// e.stopPropagation();
// });
$('#table tbody').on('dblclick',
'tr',
function () {
table.rows(this).select();
table.button('0').trigger();
});
$('#table tbody').on('click',
'tr',
function() {
table.columns.adjust();
});
//});
//$('#container').css('display', 'block');
table.columns.adjust();
}); //.ready
This discussion has been closed.
Answers
Did you face focus lost on input search box? When user types and we do search and draw()?