Error loading Bootstrap Toggle Button in Table

Question

Error loading Bootstrap Toggle Button in Table

Navigation

#1 by (2 votes)

1

The code in the table is as follows:

$('#table').DataTable({
                "destroy": true,
                "responsive": true,
                "processing": true,
                "serverSide": true,
                "ajax": "tabla/cargos",
                "columns": [
                    {
                        sortable: false,
                        "render": function ( data, type, full, meta ) {
                            return meta.row+1;
                        }
                    },
                    {'data': 'nombre'},
                    {'defaultContent':  '<button type="button" class="editar edit-modal btn btn-info ">'+
                                            '<span class="fa fa-edit"></span> Editar'+
                                        '</button> '+
                                        '<button type="button" class="eliminar delete-modal btn btn-danger">'+
                                            '<span class="fa fa-trash"></span> Eliminar'+
                                        '</button>'
                    },
                    {
                        sortable: false,
                        "render": function ( data, type, full, meta ) {
                            if(full.status){
                                return '<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">'
                            }else{
                                return '<input type="checkbox" data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">'
                            }
                        }
                    },
                ]
            });

But the table does not load the buttons, instead, if I put them out if I load the appearance of a library Bootstrap Toggle.

jquery bootstrap

asked by Pablo Contreras 16.11.2016 в 04:54

source

1 answer

Height of a div Autocomplete [jquery] does not show data

score 2 · Accepted Answer

The function is added after the creation of the "datetables". It looks like this:

$('#table').DataTable({
                "destroy": true,
                "responsive": true,
                "processing": true,
                "serverSide": true,
                "ajax": "tabla/cargos",
                "columns": [
                    {
                        sortable: false,
                        "render": function( data, type, full, meta ){
                            return meta.row+1;
                        }
                    },
                    {'data': 'nombre'},
                    {'defaultContent':  '<button type="button" class="editar edit-modal btn btn-info ">'+
                                            '<span class="fa fa-edit"></span> Editar'+
                                        '</button> '+
                                        '<button type="button" class="eliminar delete-modal btn btn-danger">'+
                                            '<span class="fa fa-trash"></span> Eliminar'+
                                        '</button>'
                    },
                    {data: 'status', render: function( data, type, row ){
                            if (data) {
                                return '<input id="toggle-demo" name="my-checkbox" type="checkbox" checked data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">';
                            }else {
                                return '<input id="toggle-demo" name="my-checkbox" type="checkbox" data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">';
                            }
                        }
                    } ,
                ],
                "fnDrawCallback": function() {
                    $("[name='my-checkbox']").bootstrapToggle();
                }
            });

Tested and working. Thanks in the same way.