DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toggles/2.0.4/toggles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toggles/2.0.4/toggles.js"></script>
<table id="example">
    <thead>
        <tr>
            <th>toggle</th>
        </tr>
    </thead>
    <tbody>
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id="1"></div></div></td></tr>
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id="2"></div></div></td></tr>
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id="3"></div></div></td></tr>
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id=""></div></div></td></tr>
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id=""></div></div></td></tr>
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id=""></div></div></td></tr>        
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id=""></div></div></td></tr>
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id=""></div></div></td></tr>
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id=""></div></div></td></tr>
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id=""></div></div></td></tr>
<tr><td><div class="control-label"><div class="toggle toggle-primary" data-toggle-on="true" data-contact-id=""></div></div></td></tr>
<tr><td><div class="control-label"><div...

JavaScript

jQuery('#example').on('draw.dt', function() {
    jQuery('.toggle').each(function() {
        $(this).toggles({
           on: $(this).data('toggle-on')
        });
    });
});  

$('#example').on('click', '.toggle', function () {
    console.log($(this).data('toggle-on'));
    if ($(this).data('toggle-on') == true) {
        $(this).data('toggle-on', false)
        console.log('Turning off ' + $(this).data('contact-id'));
    } else {
        $(this).data('toggle-on', true)
        console.log('Turning on ' + $(this).data('contact-id'));
    }
});

var table = $('#example').DataTable({
});