I have this datatable:
<div class="card-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>
<input type="checkbox" onchange="checkAll(this)" name="chk[]" />
</th>
<th>First Name</th>
<th>Last Name</th>
<th>Department</th>
<th>Admission Year</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" align="center" style="width: 2%;">
</td>
<td></td>
<td>
</td>
<td></td>
<td> </td>
<td></td>
</tr>
</tbody>
</table>
</div>
The above is a datatable that have pagination. Then I added this script below to achieve my goal.
<script>
$(function () {
$("#example1").DataTable({
"responsive": true, "lengthChange": false, "autoWidth": false
}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
console.log(i)
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}
</script>
I want to add checkbox to Select/UnselectAll, and to also check/uncheck each row.
The script above is not doing it.
How do I achieve this?
Thank
$(function() {
$("#example1").DataTable({
"responsive": true,
"lengthChange": false,
"autoWidth": false
}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
console.log(i)
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}
function checkSingle(ele) {
var checkbox = document.getElementsByTagName('input');
console.log(ele.checked)
if (ele.checked) {
if (checkbox.type == 'checkbox') {
checkbox.checked = false;
}
} else {
checkbox.checked = true;
}
}<div class="card-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>
<input type="checkbox" onchange="checkAll(this)" name="chk[]" />
</th>
<th>First Name</th>
<th>Last Name</th>
<th>Department</th>
<th>Admission Year</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" align="center" style="width: 2%;">
<input type="checkbox" onchange="checkSingle(this)" name="chk[]" />
</td>
<td>test</td>
<td>
test
</td>
<td>test</td>
<td>test </td>
<td>test</td>
</tr>
<tr>
<td valign="middle" align="center" style="width: 2%;">
<input type="checkbox" onchange="checkSingle(this)" name="chk[]" />
</td>
<td>test</td>
<td>
test
</td>
<td>test</td>
<td>test </td>
<td>test</td>
</tr>
</tbody>
</table>
</div>Is this what you were looking for?