Row Select CheckBox
Added row select checkbox
HTML
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://cdn.datatables.net/fixedcolumns/3.0.1/css/dataTables.fixedColumns.css">
<script src="http://cdn.datatables.net/fixedcolumns/3.0.1/js/dataTables.fixedColumns.min.js"></script>
<script type='text/javascript'>
// have to put this outside the js window because jsFiddle puts it in onLoad
// otherwise, will not get called if in js window
// select all checkbox changed
function OnSelectAllCheckBoxClicked(cb) {
//alert("thanks for the click!");
// set all checkboxes in first column to same checked state
$('input[type=checkbox][name^="rowselect"]').not(cb).prop('checked', cb.checked);
}
</script>
<table width="100%" class="display cell-border" id="example" cellspacing="0">
<thead>
<tr>http://jsfiddle.net/briank/8tD2p/3/#fork
<th><input type="checkbox" id="checkall" value="1" onclick="OnSelectAllCheckBoxClicked(this);"/></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="rowselect[]" value="1"/></td>
<td>Tiger Nixon</td>
<td>System Architect Extradanair. really good. I mean this guy was great</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" name="rowselect[]" value="1"/></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
...
CSS
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
.AlignCenter {text-align:center;}
/* reduce the padding. the default is 10 on the sides and 8 on the top */
.dataTables_wrapper td {
padding: 5px !important;
}
JavaScript
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "150px",
scrollX: true,
scrollCollapse: true,
paging: false,
ordering: false,
searching: true,
"columns": [{ className: "AlignCenter", width: "0px" },
null,
null,
null,
null,
null,
null
]
} );
new $.fn.dataTable.FixedColumns( table,
{
"leftColumns": 2
}
);
} );