Bootstrap Toggle Inside jQuery DataTable - Kvcodes
X

Congrats, You are Subscribed to Receive Updates.

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.

Bootstrap-Toggle-Inside-jQuery-DataTable

 

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.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts