DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

DataTables is not working on IE 11

DataTables is not working on IE 11

orphicpixelorphicpixel Posts: 1Questions: 1Answers: 0
in Free community support

Hi, I have this page that loads an iframe where datatables were used, everything is working fine with other browser except in IE 11.

What could be the problem. Here is the link of the page http://bit.ly/1qHtZi1

Answers

  • DanFDanF Posts: 7Questions: 0Answers: 2

    I have these META settings under HEAD and all is fine with IE 11 here:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="X-UA-Compatible" content="IE=11">
    <title>SOMEfunnyTITLEGoesHERE</title>

    Chrome continues to work as well with those settings

    Dan

  • allanallan Posts: 62,241Questions: 1Answers: 10,211 Site admin

    I don't have access to IE11 at the moment. Are there any errors shown in its console?

    Allan

  • hullchullc Posts: 10Questions: 3Answers: 1
    edited April 2016

    I have the same issue, the error in the IE 11 console that I get is "Object doesn't support property or method 'addEventListener'" in my jquery.js file (version 2.2.3). Some searching around led me to this stackoverflow page: http://stackoverflow.com/questions/1695376/msie-and-addeventlistener-problem-in-javascript. It seems like IE uses attachEvent instead of addEventListener. Including <meta http-equiv="X-UA-Compatible" content="IE=edge;" /> in the <head> fixes the issue. What's interesting is that while my table didn't work on IE 11, the examples here do, and looking at the HTML I don't see that header line.

  • allanallan Posts: 62,241Questions: 1Answers: 10,211 Site admin

    Was your browser running is a legacy mode or quirks mode (it will depend upon the doc type and various other things). IE11 does support addEventListener (DataTables doesn't use it directly itself, it uses jQuery for the events).

    Allan

  • hullchullc Posts: 10Questions: 3Answers: 1

    Aha! Upon closer inspection I was running in legacy mode (IE7 to be exact). Including the <meta> tag I posted in my earlier response is a good way to avoid users having the same issue I did. Thanks for helping me find the source of the error allan!

  • khaoskhaos Posts: 47Questions: 11Answers: 0
    edited June 2016

    Hullc, this response helped me greatly and led me directly to the source of my woe. My thanks. I would add that adding that meta is a great idea if the page/masterpage does not already have a compatibility set. If it does you can add a meta that is incremental(ish). You can decide for yourself how/what to test for, just add Edge to whats there or to just blow away the meta with your own. I would argue that if its not there and obeying the doctype (working) then lets not muddy the <head> ...

        // If there is a meta compat and it does NOT have Edge included, add it to whats there.
    var metaUaCompat = $('meta[http-equiv=X-UA-Compatible]', top.document).attr('content');
    if (metaUaCompat && metaUaCompat.toLowerCase().indexOf("edge") < 0) {
        $('meta[http-equiv="X-UA-Compatible"]', top.document).attr('content', metaUaCompat + ',Edge');
        $('meta[http-equiv="X-UA-Compatible"]').attr('content', metaUaCompat + ', IE=Edge');
    }

    Allen, This may be something we see more of. Maybe we could add an "AddCompat": true option.

  • khaoskhaos Posts: 47Questions: 11Answers: 0

    For the lurkers: I thought this was working but I think while testing I kept dev tools open and the doc mode was maintained. If you think logically by the time $.ready happens the document mode context is already in place. Changing it on the page has no effect. :(

  • allanallan Posts: 62,241Questions: 1Answers: 10,211 Site admin

    Thanks for posting back. To be honest I'm not surprised that you can't effect that using Javascript.

    If you link to the page I could take a look to see what is happening. Not sure I'll be able to fix it - typically DataTables is only supported in the browser specified for the browser that it is, not a browser that it is pretending to be.

    Allan

  • khaoskhaos Posts: 47Questions: 11Answers: 0

    I appreciate your offer. Sadly, my page is behind a firewall in SharePoint 2010. I am working with the powers that be to get the master page for my site updated. Specifically my error is Object doesn't support property or method 'keys'.

    Object.keys(g).forEach(function(t){t.match(/^Z/)&&(e[t]=g[t])}),

    The script interpreter from IE8 doesn't know of such things. If it did I believe the next error that would show up would be the fact that forEach was not introduced yet either. (Ran into that on another job)

    "DataTables is only supported in the browser specified for the browser that it is, not a browser that it is pretending to be." <- This is exactly how it should be! We must stop coddling the weak and these ridiculous old browsers for so long. Even Microsoft is onboard with that ... now lol.

    Soapbox dismount .. The pressure is immense ... The landing stuck like a knife in a board the crowd goes wild!!!

    Cheers, my friend. Your work is appreciated.

  • allanallan Posts: 62,241Questions: 1Answers: 10,211 Site admin

    Sounds like you might be using pdfmake? It has an error in its current release version that it uses Object.keys on startup causing anything below IE10 to give an error when you simply load the script.

    I sent a patch to pdfmake to fix that which was accepted, but it hasn't made it into a release version yet.

    Allan

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.