Pt.1: DataTables ColReorder Ajax State Save

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>DataTables example - Basic initialisation</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/bs-3.3.5/jqc-1.11.3,dt-1.10.10,cr-1.3.0,rr-1.1.0/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/s/bs-3.3.5/jqc-1.11.3,dt-1.10.10,cr-1.3.0,rr-1.1.0/datatables.min.js"></script>
    <script type="text/javascript" class="init">

    $(document).ready(function() {
        var firstTime = true;
        var table = $('#example').DataTable( {
            colReorder: true,
            rowReorder: true,
            stateSave: true,
            stateSaveCallback: function (settings, data) {
                if (! firstTime) {
                    // Send an Ajax request to the server with the state object
                    $.ajax( {
                        url: "/state_save.php",
                        data: data,
                        dataType: "json",
                        type: "POST",
                        success: function (ret) {
                            console.debug(ret);
                        }
                    } );
                }
                firstTime = false;
            }
    } );

        $("#loadButton").bind('click', function(evt){
            $.ajax({
                url: "/state_load.php",
                data: {},
                dataType: "JSON",
                type: "POST",
                success: function(data) {
                    table.colReorder.order(data.ColReorder);
                }
            });

        });

    } );

</script>
<style>body {margin:10px;}</style>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Seq.</th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>Seq.</th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </tfoot>
                    <tbody>
                        <tr>
                            <td>2</td>
                            <td>Tiger Nixon</td>
                            <td>System Architect</td>
                            <td>Edinburgh</td>
                            <td>2011/04/25</td>
                            <td>$320,800</td>
                        </tr>
                        <tr>
                            <td>22</td>
                            <td>Garrett Winters</td>
                            <td>Accountant</td>
                            <td>Tokyo</td>
                            <td>2011/07/25</td>
                            <td>$170,750</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>Ashton Cox</td>
                            <td>Junior Technical Author</td>
                            <td>San Francisco</td>
                            <td>2009/01/12</td>
                            <td>$86,000</td>
                        </tr>
                    </tbody>
                </table>

<form id="loadForm"><input type="button" value="Load" id="loadButton" /></form>
</body>
</html>