tokland/datatables-colreorder-async.html

## datatables-colreorder-async.html
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
  <title>Testing DataTable/ColOrder with async call</title>

  <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="http://nightly.datatables.net/js/jquery.dataTables.min.js"></script>
  <script src="http://nightly.datatables.net/colreorder/js/dataTables.colReorder.js"></script>
  <script>
    $(document).ready(function() {
      var table = $('#example').DataTable({
        colReorder: true,
        stateSave: true,
        stateSaveCallback: function(settings, data) {
          console.log("save", data);
          localStorage.setItem('dt-state', JSON.stringify(data));
        },
        stateLoadCallback: function(settings, callback) {
          var data = JSON.parse(localStorage.getItem('dt-state'));
          console.log("load", data);

          // Return - This works:
          //return data;

          // Callback - This does not work:
          callback(data);
        },
      });

      window.mytable = table;
    });
</script>
</head>

<body>

<table id="example" 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>
        </tbody>
    </table>
</body>
</html>
	<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
	<head>
	<title>Testing DataTable/ColOrder with async call</title>

	<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="http://nightly.datatables.net/js/jquery.dataTables.min.js"></script>
	<script src="http://nightly.datatables.net/colreorder/js/dataTables.colReorder.js"></script>
	<script>
	$(document).ready(function() {
	var table = $('#example').DataTable({
	colReorder: true,
	stateSave: true,
	stateSaveCallback: function(settings, data) {
	console.log("save", data);
	localStorage.setItem('dt-state', JSON.stringify(data));
	},
	stateLoadCallback: function(settings, callback) {
	var data = JSON.parse(localStorage.getItem('dt-state'));
	console.log("load", data);

	// Return - This works:
	//return data;

	// Callback - This does not work:
	callback(data);
	},
	});

	window.mytable = table;
	});
	</script>
	</head>

	<body>

	<table id="example" 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>
	</tbody>
	</table>
	</body>
	</html>