How to initialize Bootstrap Toggle inside datatable?

How to initialize Bootstrap Toggle inside datatable?

rrzavaletarrzavaleta Posts: 78Questions: 52Answers: 2

What I want to do is apply a style to an input checkbox.
A style like this:

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?


  • crwdzrcrwdzr Posts: 31Questions: 5Answers: 6
    edited September 2017

    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)=>{
    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

  • kthorngrenkthorngren Posts: 14,175Questions: 25Answers: 3,345

    Here is a thread you might be interested in:

    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.


This discussion has been closed.