The problem I'm experiencing in Chrome and Edge:
- Go to https://datatables.net/examples/basic_init/zero_configuration.html
- Sort the table by some column (e.g. "Age")
- Use the pagination interface at the bottom of the table to go to one of the other pages
- Click on one of the navigation links to the left (e.g. "FAQs" or "Download")
- Click the browser's back button and observe that the table is now back to its original state (sorted by the "Name" column and on page 1)
In Firefox, the table is still sorted by the correct column and is still on the correct page. How can I make Chrome and Edge also behave this way?
I know DataTables has its stateSave option (documentation and example), but the problem with that is when the user navigates around the site and then clicks a link to go to the page that has the DataTables table, it will put them back into the same state in that scenario too. I only want the user to be put back into the same state if they use their browser's back button.
Based on this post you could clear the saved state when you click on the link that leads you to the page with the table
see example here
$(document).ready(function() {
$('#example').DataTable( {
"paging": true,
"ordering": true,
"info": false,
stateSave: true
} );
} );
$(".table_link").on("click", function(){
$('#example').DataTable().state.clear();
});
Ok have kind of a crazy idea that might work for this. If you use the "stateSaveCallback" to set a URL hash this will add an item into the browser history. Then you could check for the hash value when the page loads. If the hash is not present then you clear the state cache on the DataTable.
Where this breaks down is in the following scenarios:
Scenario 1: User presses back button after state save on data table page:
- User does something on grid.
- State is saved triggering the stateSaveCallback
- stateSaveCallback updates the "window.location.hash" value.
- User then presses the "back" button
- Page goes to the current URL except without the hash.
- State is cleared.
Scenario 2: Users copies URL after state save has taken place
- User does something on grid.
- State is saved triggering the stateSaveCallback
- stateSaveCallback updates the "window.location.hash" value.
- User manually copies URL which includes hash value.
- User uses this copied value to directly navigate to data table page.
- Previous state won't be cleared.
But in all the other scenarios provided as long as you don't include the hash code on your navigation links this would reliably detect if a user used the back button to navigate to the grid since it would be it's own history item.
Try this code: (concept maybe helpful)
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<style> .modal{text-align:center;}
body{margin: 0 auto;padding:15px;}</style>
</head>
<body>
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<table id="demoDataTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
</tbody>
</table>
</div></div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do you want to load the original table?</h4>
</div>
<div class="modal-body">
<button type="button" class="no btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="yes btn btn-primary" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function() {
var $table = $('#demoDataTable').DataTable({
stateSave: true
});
if ($table.state()) {
$('#myModal').modal('show');
}
$('.yes').click(function() {
$table.state.clear();
$table.destroy();
$('#demoDataTable').DataTable({
stateSave: true
});
});
});
</script>
</html>
来源：https://stackoverflow.com/questions/40550946/getting-datatables-to-keep-its-state-when-the-user-clicks-the-back-button-witho