Datatables-Checkbox

by Alex Yhap

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
    <table id="transactiontable" class="display">
        <thead>
            <tr>
                <th></th>
                <th>Individual</th>
                <th>Recurring Gift</th>
                <th>Transaction No</th>
                <th>Amount</th>
            </tr>
        </thead>
        
        <tfoot>
            <tr>                                    
                <th id="selectedCheckboxes"></th>
                <th></th>
                <th></th>
                <th></th>
                <th id="amountSum">Sum: </th>
            </tr>
        </tfoot>

        <tbody>
                <tr>
                    <td style="padding-left: 17px;">                        
                        <input type="checkbox" name="" id="0000001" value="false">
                    </td>
                    <td><a target="_blank" href="#">Alexander Yhap</a></td>
                    <td><a target="_blank" href="#">R-00001</a></td>
                    <td><a target="_blank" href="#">0000001</a></td>
                    <td class="amountCell">$117.00</td>
                </tr>
                <tr>
                    <td style="padding-left: 17px;">                        
                        <input type="checkbox" name="" id="0000002" value="false">
                    </td>
                    <td><a target="_blank" href="#">Steven Strange</a></td>
                    <td><a target="_blank" href="#">R-00002</a></td>
                    <td><a target="_blank" href="#">0000002</a></td>
                    <td...

JavaScript

j$ = jQuery.noConflict();
        var globalRow;
        var globalZero;
        j$(document).ready( function () {                
            var events = j$('#events');
            var transactionTable;

            drawDataTables();            
            //displayCreatedPayments();

            function drawDataTables(){
                transactionTable = j$('[id$="transactiontable"]').DataTable({                                    
                    "bFilter": false,
                    "bSort" : true,           
                    order: [[ 1, 'asc' ]],
                    fixedHeader: true,     
                    columnDefs: [ {
                        orderable: false,
                        className: 'select-checkbox',
                        targets:   0
                    } ],
                    select: {
                        style:    'os',
                        selector: 'td:first-child'
                    },            
                //TODO: rearrange dom; pagination, SHOWING 10 of 100, etc 
                    buttons: [
                        'selectAll',
                        'selectNone'
                    ],
                    dom: 'Bfrtip'
                });                    
            }

            transactionTable
                .on( 'select', function ( e, dt, type, indexes ) {
                    // globalRow = transactionTable;
                    // globalZero = transactionTable.rows( indexes ).data().toArray();
                    // var rows = dt.rows( { selected: true } ).count();
                    // console.log( 'There are '+rows+'(s) selected in the table' );

                    transactionTable.rows( { selected: true } ).every( function ( rowIdx, tableLoop, rowLoop ) {
                        var data = this.data();                        
                        //console.log('row: ' + rowIdx + '; Data: ' + data);
                        // ... do something with data(), or this.node(), etc
       ...