Associate row of datatable to bootstrap switch (using another column field)

Question

I'm using datatables and bootstrap switch plugins to enable and disable users. When I click on switch I call a web service throught ajax and my rest web services switch status of user into database. The problem is know whitch user is selected from datatables row and pass it to my web service. This is table initialitanion:

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

And this is bootstrap switch event :

$('#usersTable').on('switchChange.bootstrapSwitch', 'input[name="my-checkbox"]', 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/" + //username setted above,
            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){


                    }
                    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";
            }
        });
    });

I thought to set username as field for bootstrap switch during its construction but how? I should do something like this:

if (data) {
    return '<input value=username type="checkbox" name="my-checkbox" checked>';

but it doesn't work because set username and not the value returned from ajax call. Can you help me?

luca luca · Accepted Answer · 2016-02-08T09:44:57

I solved with this code (I hope it is useful for someone)

{ data: "enabled", render: function ( data, type, row ) {
    if (data) {
        return '<input data="'+row.username+'" type="checkbox" name="my-checkbox" checked>';
    }else {
        return '<input data="'+row.username+'" type="checkbox" name="my-checkbox">';
    }
}

and then I get the value with $(this).attr('data')

Associate row of datatable to bootstrap switch (using another column field)

1 Answers