jQuery DataTables statesave does not work in IE 11?

Question

I have a datatables application that works perfectly in chrome/firefox, but statesave does not fuction in IE11 (I try sorting or searching, refresh, and that state is not preserved). Unfortunately most of my users will only have access to internet explorer. The statesave demo on the datatables website itself works for me in IE (https://www.datatables.net/examples/basic_init/state_save.html), so I know there's a way...

The application is rendered by flask, and the jquery and datatables libraries are stored locally due to security limitations on the server. I am including a complete example below in case there's anything at all missing to get this to work. Thanks all!!

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript" src="{{url_for('static', filename='jquery.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='datatables.min.css')}}"/>
<script type="text/javascript" src="{{url_for('static', filename='datatables.min.js') }}"></script>

<table width="100%" class="display" id="example" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Haley Kennedy</td>
                <td>Los Angeles</td>
                <td>43</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>New York</td>
                <td>66</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Paris</td>
                <td>41</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sidney</td>
                <td>23</td>
            </tr>
        </tbody>
    </table>

<script type=text/javascript>
$(document).ready(function() {
    $('#example').DataTable({
        stateSave: true
    });
});
</script>
</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:16

I discovered that local storage wasn't working in IE when launched from the local server I was using. This is probably why stateSave was failing. See: Access Denied for localstorage in IE10

I ended up using stateSaveCallback and stateLoadCallback with an AJAX call instead of using the regular stateSave. The /state_save and /state_load urls contained functions to pass the datatables JSON back and forth from files saved on the server, with a distinct one for each user.

<script type=text/javascript>
$(document).ready(function() {
    $('#example').DataTable({
        stateSave: true,
        "stateSaveCallback": function (settings, data) {
            $.ajax({
                "url": "/state_save",
                "data": data,
                "dataType": "json",
                "type": "POST",
                "success": function () {}
            });
        },
        "stateLoadCallback": function (settings) {
            $.ajax({
                "url": "/state_load",
                "async": false,
                "dataType": "json",
                "type": "GET",
                "success": function (json) {
                    o = json;
                }
            });
            return o;
        }
    });
});
</script>

jQuery DataTables statesave does not work in IE 11?

1 Answers1