如何将复选框全选/取消全选添加到 HTML data.table

Question

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

Answer 1

 $(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?