Bootstrap Toggle Inside jQuery DataTable |

Congrats, You are Subscribed to Receive Updates.

Bootstrap Toggle Inside jQuery DataTable


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.


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

Now, the Server-side Processing JS Code.

            "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.


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, PHP and Data Analyst. Database Management Advance Level


  1. commenter

    After rendering the toggle switch in datatable, how can I pass the checked status to server side, to save it in database,

    aoColumns: [

    { mDataProp: ‘Active’, type: ‘select’, loadurl: baseUrl + “/Admin/GetActiveList”, loadtype: ‘GET’, onblur: ‘submit’ }

    How can I trigger the submit event? I have separate add and update urls for the datatable. Thanks for your help.

    • commenter

      How did you place the submit button to trigger the event?.

      Why dont you use the submit button separately. and when this button triggered, check the checked checkboxes and than collect its data. With that you can do one more Ajax to server side. Anyway, its outside DataTable. Not within Database functions.

Comment Below

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


Current ye@r *