How to add checkbox Select/Unselect All to HTML data table-CodePudding

I have this datatable:

<div >
    <table id="example1" >
        <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

CodePudding user response：

$(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 >
    <table id="example1" >
        <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?