2016-03-02 85 views
0

我有一个datatables应用程序,完美工作在铬/火狐,但状态不IE12功能(我尝试排序或搜索,刷新,并保持该状态)。不幸的是,我的大部分用户只能访问Internet Explorer。在数据表网站本身的状态演示本身适用于我在IE(https://www.datatables.net/examples/basic_init/state_save.html),所以我知道有一种方法...jQuery DataTables stateave在IE 11中不起作用?

应用程序呈现由flask和jquery和datatables库本地存储由于安全限制在服务器上。我在下面列出了一个完整的例子,以防万一缺少这些工作。谢谢!

<!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> 

回答

0

我发现从本地服务器启动时,本地存储在IE中不起作用。这可能是stateSave失败的原因。见:Access Denied for localstorage in IE10

我结束了使用stateSaveCallback和stateLoadCallback与AJAX调用,而不是使用常规stateSave。 /state_save/state_load网址包含的功能是从保存在服务器上的文件来回传递数据表JSON,每个用户都有不同的文件。

<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>