I am using Bootstrap Toggle, CSS, and JavaScript loads fine please see image.However when I use inside datatable (Done coloumn) custom JavaScript and styling doesn't work.I am getting data via Ajax
Datatable Script
$('#sampleTable').DataTable( {
"ajax": {
"url": "/generalTodo",
"dataSrc": ""
},
"columns": [
{
"sortable": true,
className: 'centerize',
render: function ( data, type, full, meta ) {
return '<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">';
}
},.....
Bootstrap switch/toggle is a simple component used for activating one of two predefined options. Commonly used as an on/off button. It's mostly used in a number of various forms since they are very simple to use and cut the time one needs to fill all the inputs.
Add data-toggle="buttons" to a . btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add . btn-group-toggle to style the <input> s within your buttons. Note that you can create single input-powered buttons or groups of them.
DataTables offers full integration with Bootstrap 5 so that your DataTables will match the same look and feel of the rest of your site. Bootstrap 5 provides a number of options for styling HTML tables, giving you flexibility over the table, while ensuring they look very slick.
The Bootstrap DataTable is an advanced plugin to combine advanced data operation of the table. The Bootstrap4 DataTable is an advanced design and modify the version of the bootstrap table. The Bootstrap4 DataTable provides JavaScript validation and cascading style sheet design without any configuration.
I have found the solution:
return '<input id="toggle-demo" type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">';
and
"fnDrawCallback": function() {
$('#toggle-demo').bootstrapToggle();
},
Loading Js after table finish the loading!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With