File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
<link href="https://nightly.datatables.net/fixedcolumns/css/fixedColumns.dataTables.css?_=081b77a91f8e0e1b8aa227f633cbdd04.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/fixedcolumns/js/dataTables.fixedColumns.js?_=081b77a91f8e0e1b8aa227f633cbdd04"></script>
    
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <button id="count">Count</button>
      
<div width="400">
<table id="mytable" class="display datatable" border="1">
    <thead id="mytable_thead">
        <tr>
            <th>Checkbox</th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
            <th>Col6</th>
            <th>Col7</th>
            <th>Col8</th>
            <th>Col9</th>
            <th>ColA</th>
        </tr>
    </thead>
</table> 
​
<br>
<div align="center">
<input type="button" value="Click here" onClick="document.test.output.value='output here which checkboxes were checked';"><br>
<textarea id="output" name="output" rows="5" cols="80"></textarea>
</div>
</div>      
      
      
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready( function () {
​
    var data = [
        ["111","testing1","something1 and some random text to make the table a bit wider so that the fixedColumns can be tested easier","someotherthing1","Can ordered melody and harmonics and other elements in chord progressions","bb","cc","dd","ee","ff","gg"],
        ["222","testing2","something2 and some random text to make the table a bit wider so that the fixedColumns can be tested easier","someotherthing2","aa","somehow approach something like emotional equations, ","cc","dd","ee","ff","gg"],
        ["333","More recent experiments have validated","something3 and some random text to make the table a bit wider so that the fixedColumns can be tested easier","someotherthing3","aa","bb","however subtle or sublime as in the case of Mozart or Bach","dd","ee","ff","gg"],
        ["444","the Mozart Effect in performance enhancement of mathematics itself by the playing","something4 and some random text to make the table a bit wider so that the fixedColumns can be tested easier","someotherthing4","aa","bb","cc","or other composers of genius ? ","ee","ff","gg"],
        ["555","of Mozart in the background of university trigonometry exams","something5 and some random text to make the table a bit wider so that the fixedColumns can be tested easier","someotherthing5","aa","bb","cc","dd","With regard to Mozart, however, much has been suggested to connect his music with mathematics","and even a possible predisposition to spatial-temporal reasoning","and temporary mental enhancement when listening to his compositions"]
    ];
​
    $(document).ready(function() {
        $('#mytable').DataTable( {
            drawCallback: function () { 
                this.api().fixedColumns().relayout();
            },
            data: data,
            "searching": false,
            "scrollX": true,
            paging: false,
            "bInfo": false,
            "ordering": false,          
            fixedColumns: {leftColumns: 2},
            "aoColumnDefs": [
                    {
                        "aTargets": [0],
                        "mRender": function (data, type, full) {
                            return '<input type=\"checkbox\" name="chkD' + data + '" value="1">';
                        }
                    },
                    { className: "dt-nowrap", "targets": [ 1,2 ] }
                    
            ]               
        } );
    } );
  
  $('#count').click(function() {
​
     var count = 0;
​
    $.each( $('div.DTFC_LeftBodyLiner tbody tr'), function(idx,row) {
     if ($(row).find('input').prop('checked') === true) {
       count++;
     }      
    });
    
    console.log(count);
  });
​
} );
​
Output 300px

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers