Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How To Display Bootstrap Toggle Switch with DataTables via Render

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">';


             }
            },.....

enter image description here

like image 259
ErcanE Avatar asked Dec 26 '15 12:12

ErcanE


People also ask

Does bootstrap have a toggle switch?

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.

How do I create a toggle button in bootstrap?

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.

Does DataTables work with Bootstrap 5?

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.

What is bootstrap DataTable?

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.


1 Answers

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!

like image 120
ErcanE Avatar answered Sep 28 '22 00:09

ErcanE