Reply To: Toggle switches inside datatable

[Support]

Hello,

Oh right. Probably that’s the issue!

Please try with the code below:

In the example below I am using the ajax table example from here: https://www.okler.net/previews/porto-admin/3.0.0/tables-ajax.html

JS (examples.datatables.ajax.js):

(function($) {

	'use strict';

	var datatableInit = function() {

		var $table = $('#datatable-ajax');
		$table.dataTable({
			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
			bProcessing: true,
			sAjaxSource: $table.data('url'),
			drawCallback: function( settings ) {
		        if ( typeof Switch !== 'undefined' && $.isFunction( Switch ) ) {

					$(function() {
						$('input[name="file_public"]').each(function() {
							var $this = $( this );

							$this.themePluginIOS7Switch();
						});
					});

				}

				$table.find('td :checkbox[name=file_public]').off().on('change', function() {
				  	console.log('CHECK!');          
				});
		    }
		});

	};

	$(function() {
		datatableInit();
	});

}).apply(this, [jQuery]);

* Note I add the checkbox event inside draw callback.

HTML:

<table class="table table-bordered table-striped" id="datatable-ajax" data-url="ajax/ajax-datatables-sample.json">
	<thead>
		<tr>
			<th width="20%">Rendering engine</th>
			<th width="25%">Browser</th>
			<th width="25%">Platform(s)</th>
			<th width="15%">Engine version</th>
			<th width="15%">CSS grade</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

(ajax/ajax-datatables-sample.json):

{
	"aaData": [
		["<div class=\"switch switch-sm switch-info\"><input type=\"checkbox\" name=\"file_public\" /></div>","Internet Explorer 4.0","Win 95+","4","X"],
		["Trident","Internet Explorer 5.0","Win 95+","5","C"]
	]
}

Result:

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---