DataTables

DataTables Examples

by WhetDawg

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>
<table cellpadding="0" cellspacing="0" border="0" class="row-border" id="table">
<thead>
    <th>Video ID</th>
    <th>Filename</th>
    <th>Action</th>
</thead>
<tbody>
    <tr>
    <td><input type='checkbox'/></td> <td>AB2D</td>  <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
    <tr>
    <td><input type='checkbox'/></td> <td>ABCeD</td>  <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
    <tr>
    <td><input type='checkbox' checked/></td> <td>ABCD</td>  <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th>Video ID</th>
        <th>Filename</th>
        <th>Action</th>
    </tr>
</tfoot>
</table>

JavaScript

$.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
    var a = this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
        return $('input', td).prop('checked') ? '1' : '0';
    }).toArray();

    return a;
};

var table = $('#table').DataTable({
	columnDefs: [{
  	orderDataType :'dom-checkbox',
    targets: 0
  }]
});

$('#table tbody').on('click',"input[type='button']",function() {
    console.log(table.row($(this).parents('tr')));
                
    table
        .row( $(this).parents('tr'))
        .remove()
        .draw();
});