Bootstrap Toggle Inside jQuery DataTable

Introduction

Creating custom Bootstrap Toggle Inside jQuery DataTable is not much complicated. You have to trigger the Toggle after rendering the DataTable. Let me show you with some sample codes. Bootstrap toggles usually helpful to apply the changes like status. But in the interactive websites you need to provide an option to change status in real-time like with toggle or switch.

Bootstrap Toggle:

We will start with Bootstrap toggles. Normally, we can create it with below codes.

<input id="kv-toggle-demo" type="checkbox" checked data-toggle="toggle" data-on="Active" data-off="Due" data-onstyle="success" data-offstyle="warning">

And the JS code will be like this.

jQuery('#kv-toggle-demo').bootstrapToggle();

And the Datatable,  you can place it on any column  if you have coded with Server-side processing, its more easy to code.  You can place the above HTML code inside the php function to pass it through the JSON. Handling the AJAX with your  Datatable code, you can recall the function again.

DataTable Bootstrap Toggle

Let me have a sample php function and js for you.

 <table id="registered-users-table" class="display responsive nowrap table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr><th><?php echo $label_language_values['client_name'];?></th> 
     <th><?php echo $label_language_values['phone'];?></th>
     <th>I/C No</th>
     <th>Membership Type</th>
     <th>Status</th>
 </tr>
</thead>
</table>

Now, the Server-side Processing JS Code.

jQuery('#registered-users-table').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "kvcodes.php?Users=yes", 
             "sScrollX": "100%", 
            aoColumns : [                          
                { "sWidth": "20%" },
                { "sWidth": "20%"},
                { "sWidth": "20%"},
                { "sWidth": "20%"},                           
                { "sWidth": "20%" }
            ],
		"fnDrawCallback": function() {
            jQuery('#registered-users-table #kv-toggle-demo').bootstrapToggle();
        }

That’s it, it will be done with it.Bootstrap Toggle Inside jQuery DataTable will work fine.  Check it and if you have doubt or problems on implementations, Comment in next tab with your code.  Let me help you to fix it.