Bootstrap switch inside datatables plugin with ajax call catch event
<p>I'm using <a href="https://datatables.net/" rel="nofollow noreferrer"> datatables plugin</a> and I have a problem with <a href="http://www.bootstrap-switch.org/" rel="nofollow noreferrer">bootstrap switch</a>.
This is my javascript code, where I create a switch with the value retrieved from ajax call:</p>

<pre><code>$(document).ready(function() {
    if ( ! $.fn.DataTable.isDataTable( '#usersTable' ) ) {
        userTable = $('#usersTable').DataTable({
            responsive: true,
            //fix problem with responsive table
            "autoWidth": false,
            "ajax": "table",
            "columns": [
                        { "data": "username" },
                        { data: "enabled", render: function ( data, type, row ) {
                            if (data) {
                                return '&lt;input data="username" type="checkbox" name="my-checkbox" checked&gt;';
                            }
                            else {
                                return '&lt;input data="username" type="checkbox" name="my-checkbox"&gt;';
                            }
                        }   
                        },
                        { "data": "role.role"},
                        { "data": "clientVersion.name" },
                        {
                            data: null,
                            className: "center",
                            defaultContent: '&lt;button type="button" class="btn btn-danger" id="deleteLicense" data-toggle="modal" th:attr="data-href=${license.idClientLicense}" data-target="#deleteLicenseModal"&gt;Delete&lt;/button&gt;'
                        }
                        ],
                        "fnDrawCallback": function() {
                            //Initialize checkbos for enable/disable user
                            $("[name='my-checkbox']").bootstrapSwitch({size: "small", onColor:"success", offColor:"danger"});
                        }
        });
    }
    else {
        userTable.ajax.url("table").load();
    }

    $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
        //CSRF attribute for spring security
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            type : "POST",
            url : "status"+(this).attr("data"),
            data : form.serialize(),
            beforeSend:function(xhr) {
                xhr.setRequestHeader(header, token);
            },  
//          all right with rest call
            success : function(data) {  
//              No exception occurred
                if (data.status==true){ 
//                  Also the field are right(for e.g. form value)
                    if(data.success==true){
//                      il risultato sta in data.result
//                      window.location.reload(true);
                        //reset select 2 choise because it can set with old user who no longer exist 
//                      reload only the tag with id carsTable, so only the table

                    }
                    else{
//                      code if there are some error into form for example
                    }
                } else {
//                  code exception
                    notifyMessage(data.result, 'error');
                }
            },
//          error during rest call
            error : function(data) {
                window.location.href = "/ATS/500";
            }
        });
    }); 
});
</code></pre>

<p>and this is HTML code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
&lt;title&gt;Administration users&lt;/title&gt;
&lt;!-- Tell the browser to be responsive to screen width --&gt;
&lt;meta
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    name="viewport"&gt;
&lt;!-- Spring csrf  --&gt;
&lt;meta name="_csrf" th:content="${_csrf.token}" /&gt;
&lt;!-- default header name is X-CSRF-TOKEN --&gt;
&lt;meta name="_csrf_header" th:content="${_csrf.headerName}" /&gt;
&lt;!-- Bootstrap Core CSS --&gt;
&lt;link th:href="@{/static/assets/bootstrap/css/bootstrap.css}"
    rel="stylesheet"&gt;
&lt;!-- Font Awesome --&gt;
&lt;link rel="stylesheet"
    th:href="@{/static/assets/component/font-awesome-4.4.0/css/font-awesome.min.css}"&gt;
&lt;!-- Ionicons --&gt;
&lt;link rel="stylesheet"
    href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"&gt;
&lt;!-- DataTables --&gt;
&lt;link rel="stylesheet"
    th:href="@{/static/assets/plugins/datatables/dataTables.bootstrap.css}"&gt;
&lt;link rel="stylesheet"
    th:href="@{/static/assets/plugins/datatables/extensions/Responsive/css/responsive.bootstrap.min.css}"&gt;
&lt;!-- Theme style --&gt;
&lt;link rel="stylesheet"
    th:href="@{/static/assets/dist/css/AdminLTE.min.css}"&gt;
&lt;!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. --&gt;
&lt;link rel="stylesheet"
    th:href="@{/static/assets/dist/css/skins/_all-skins.min.css}"&gt;
&lt;!-- Select2 --&gt;
&lt;link rel="stylesheet"
    th:href="@{/static/assets/plugins/select2/select2.min.css}"&gt;
&lt;!-- Bootstrap switch --&gt;
&lt;link rel="stylesheet"
    th:href="@{/static/assets/plugins/bootstrap-switch/css/bootstrap-switch.min.css}"&gt;
&lt;!-- jQuery 2.1.4 --&gt;
&lt;script th:src="@{/static/assets/plugins/jQuery/jQuery-2.1.4.min.js}"
    type="text/javascript"&gt;&lt;/script&gt;
&lt;!-- Bootstrap 3.3.5 --&gt;
&lt;script th:src="@{/static/assets/bootstrap/js/bootstrap.min.js}"
    type="text/javascript"&gt;&lt;/script&gt;
&lt;!-- DataTables --&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/plugins/datatables/jquery.dataTables.min.js}"&gt;&lt;/script&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/plugins/datatables/dataTables.bootstrap.min.js}"&gt;&lt;/script&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js}"&gt;&lt;/script&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js}"&gt;&lt;/script&gt;
&lt;!-- page script --&gt;
&lt;!-- Slimscroll --&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/plugins/slimScroll/jquery.slimscroll.min.js}"&gt;&lt;/script&gt;
&lt;!-- FastClick --&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/plugins/fastclick/fastclick.min.js}"&gt;&lt;/script&gt;
&lt;!-- Bootstrap-growl --&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/plugins/notify/jquery.bootstrap-growl.js}"&gt;&lt;/script&gt;
&lt;!-- AdminLTE App --&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/dist/js/app.min.js}"&gt;&lt;/script&gt;
&lt;!-- AdminLTE for demo purposes --&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/dist/js/demo.js}"&gt;&lt;/script&gt;
&lt;!-- Select2 --&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/plugins/select2/select2.full.min.js}"&gt;&lt;/script&gt;
&lt;!-- Bootstrap switch --&gt;
&lt;script type="text/javascript"
    th:src="@{/static/assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js}"&gt;&lt;/script&gt;
&lt;script type="text/javascript" th:src="@{/static/assets/js/user.js}"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body class="hold-transition skin-blue sidebar-mini"&gt;
    &lt;div class="wrapper"&gt;
        &lt;!-- Header nd menu fragment --&gt;
        &lt;div th:replace="../fragments/dashboard-header :: dashboard-header"&gt;&lt;/div&gt;
        &lt;!-- Content Wrapper. Contains page content --&gt;
        &lt;div class="content-wrapper"&gt;
            &lt;!-- Content Header (Page header) --&gt;
            &lt;section class="content-header"&gt;
                &lt;h1&gt;Administration&lt;/h1&gt;
                &lt;ol class="breadcrumb"&gt;
                    &lt;li&gt;&lt;a th:href="@{/}"&gt;&lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; Home
                    &lt;/a&gt;&lt;/li&gt;
                    &lt;li class="active"&gt;User&lt;/li&gt;
                &lt;/ol&gt;
            &lt;/section&gt;
            &lt;!-- Main content --&gt;
            &lt;section class="content"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-xs-12"&gt;
                        &lt;div class="box"&gt;
                            &lt;div class="box-header"&gt;
                                &lt;h3 class="box-title"&gt;Users&lt;/h3&gt;
                            &lt;/div&gt;
                            &lt;!-- /.box-header --&gt;
                            &lt;div class="box-body"&gt;
                                &lt;!-- -Users table --&gt;
                                &lt;table id="usersTable"
                                    class="table table-bordered table-striped"&gt;
                                    &lt;thead&gt;
                                        &lt;tr&gt;
                                            &lt;th&gt;Username&lt;/th&gt;
                                            &lt;th&gt;Enable&lt;/th&gt;
                                            &lt;th&gt;Role&lt;/th&gt;
                                            &lt;th&gt;Version&lt;/th&gt;
                                            &lt;th&gt;Delete&lt;/th&gt;
                                        &lt;/tr&gt;
                                    &lt;/thead&gt;
                                &lt;/table&gt;
                                &lt;!-- Create two equals button because when I am on desktop I show the text add fleet otherwise the + and the tooltip. 
                                This is need because otherwise the text goes out the button --&gt;
                                &lt;button id="addUserButton" type="button"
                                    class="btn btn-primary visible-lg col-lg-1 col-lg-offset-11"
                                    data-toggle="modal" data-target="#addUserModal"&gt;Add
                                    user&lt;/button&gt;
                                &lt;button id="addlicenseButton" type="button"
                                    class="btn btn-primary hidden-lg col-xs-1 col-xs-offset-11"
                                    data-toggle="modal" data-target="#addUserModal"&gt;
                                    &lt;span class="glyphicon glyphicon-plus" data-toggle="tooltip"
                                        title="Add user"&gt;&lt;/span&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!-- /.col --&gt;
                &lt;/div&gt;
                &lt;!-- /.row --&gt;
            &lt;/section&gt;
            &lt;!-- /.content --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I read several questions and answer but I think that my problem is linked to <code>"fnDrawCallback": function()</code> because I tried all the solutions and None worked. Might be that the switch isn't correctly setted?
This is the table
<a href="https://i.stack.imgur.com/M6Dma.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M6Dma.jpg" alt="enter image description here"></a></p>