DataTables

DataTables Examples

by slawe

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<input type="checkbox" id="checkall">
    <label for="checkall">check all</label><br>
<table id="example">
    <thead>
        <tr>
            <th>checkbox</th>
        </tr>
    </thead>
    <tbody>
        <tr><td><input type="checkbox" class="checkbox1"/>slawe</td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/>aaaa</td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>        
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>        
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>        
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>        
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>        
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>        
        <tr><td><input type="checkbox" class="checkbox1"/></td></tr>
        <tr><td><input type="checkbox"...

JavaScript

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

$('#checkall').click(function(event) {  //on click 
    var checked = this.checked;
    table.column(0).nodes().to$().each(function(index) {    
        if (checked) {
            $(this).find('.checkbox1').prop('checked', 'checked');
        } else {
             $(this).find('.checkbox1').removeProp('checked');            
        }
    });    
    table.draw();
 });