IE11 Buttons and other Javascript issues
IE11 Buttons and other Javascript issues
jamgam
Posts: 9Questions: 3Answers: 0
I'm having trouble with IE11 and my datatable. Everything works in Firefox and Chrome but none of my colVis or buttons are working (and some subsequent javascript is working in IE
I have this in my <head> which I found here
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
All of my JS and CSS files are downloaded and stored locally. I don't see any errors in Firefox or Chrome console (had to request access to IE dev tools, still waiting)
My table code looks as follows
My columndefs aren't working or the buttons
Does it matter what order the javascript and css files are referenced in the header?
BTW this javascript is in an EJS file, don't know if that matters. Let me know what else is needed. Didn't want to just throw all the code in here and it get messy
var table = $('#myTable').DataTable({
"createdRow": function(row, data, dataIndex) {
if (data[8] == 'U' && !data[7]) {
$(row).css("background-color", "pink");
}
},
lengthMenu:[[25,50,-1],[25,50,"All"]],
dom: 'Bfrtip',
select: {
style: 'multi'
},
buttons: [
"pageLength",
"colvis",
{
text: 'Download',
className: 'buttontoHide',
action: function (e, dt, node, config) {
var data = table.rows({selected: true}).data().toArray();
console.log(data)
if (data.length < 1 || data == undefined) {
console.log('true')
table.columns(4).search('Hpg').draw();
data = table.rows({filter: 'applied'}).data().toArray()
console.log(data);
}
data2 = {'data': data}
$.ajax({
'url': `${url}:${port}/download`,
'type': 'POST',
'data': JSON.stringify(data2),
'dataType': 'json',
'contentType': "application/JSON; charset=UTF-8",
'success': function(data) {
var w = window.open('download?jobno='+data2.data[0][0]);
//w.document.open();
//w.document.write(JSON.stringify(data));
//w.document.close();
}
})
}
}
],
language: {
"search": "Filter"
},
columnDefs: [
{
"targets": [6,7],
"render": function (data, type, row, meta) {
if (!data) {
return data
} else {
return moment(data).format('YYYY-MM-DD');
}
}
//"render": $.fn.dataTable.render.moment('Do YYYY-MM-DD')
},
{
"targets": [0,9,10,11],
"visible": false
}
]
})
This discussion has been closed.
Answers
Yep, definitely. The best would be to look at the examples on this site.
If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Thank you. i'll work on an example as I can't show the actual page (behind company firewall). Can you show me where in the examples it shows the javascript and CSS order? Maybe I'm blind but in the examples (ColVis for example) it just shows that "these javascript libraries were used"
Every example, below the table, has tabs for "Javascript", "HTML" and "CSS". Click on the tabs to see what Colin is referring to. You can also use the Download Builder to get the proper files in the proper order.
Kevin
Yes I see now. Apologies
I did the same order as the download builder and now it's not working in Chrome or Firefox either. Great
The download build prioritises the libraries, so the order should be correct. Can you link to the page where this is happening, or create a test case as I asked for above, please?
Colin
I'm working on the test case. Going to take a while to get it setup
Ok. I got it. Had a template string in the javascript code and apparently IE doesn't support that. Apologies. IE was never getting to the datatables javascript b/c of that