How to initialize Bootstrap Toggle inside datatable?

rrzavaleta

What I want to do is apply a style to an input checkbox.
A style like this: http://www.bootstraptoggle.com/

In the columns I define the type of button as follows.

  {"targets": [1], "width": "1%", "orderable": false, "data": null,
                            return '<input type = "checkbox" id = "checkbox_stat" value = "F" data-toggle = "toggle" data-onstyle = "success" data-offstyle = "danger" = "NO" data-width = "60" data-height = "20" data-size = "mini"> ';
                 
            }
        },

Build the table with a standard checkbox, a "small square". When I apply in the initComplete method the appearance of the checkbox changes, the appearance change only applies to the first page, when changing to any other page does not apply the change of appearance to the button.

   "initComplete": function (settings, json) {
            removeLoading ();
         $ ("# checkbox_status") bootstrapToggle ();
        }

What do I need to do to apply the change of appearance on all pages?

crwdzr

have you tried using the render function under column defines? I have never used bootstrap toggles but I do something simliar on my tables with buttons and other labels and this may be along the lines you are looking for:

{
'data' : 'my_col',
"render": (data,type)=>{
if(type==='sort')
return data
let checked = (data===1) ? 'checked' : ''
return '<input type="checkbox" . . . . .' + checked + '>';
},
},

the only thing there that really matters is that the render function is manually looking at the data and adding the 'checked' flag there and then returning a string for the table to display, everything else is just a quick mockup

kthorngren

Here is a thread you might be interested in:
https://datatables.net/forums/discussion/40032

Make sure to test the solution extensively to make sure the toggles work correctly. My final solution may work for my environment but might behave differently in yours.

Kevin