Column text input filter in headers loose select all functionality in IE
Column text input filter in headers loose select all functionality in IE
rpresley
Posts: 1Questions: 1Answers: 0
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()?