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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.