so I am working with dataTables and I am having trouble on showing the checkboxes on my tables. So I have this code:

<table id="employeeList" class="table table-sm table-bordered table-hover" cellspacing="0" width="200%">
      <thead class="blue lighten-2">
         <tr>
            <th>RTO</th>
            <th>Name</th>
            <th>Address</th>
            <th>RTO Score</th>
            <th>Production Machine</th>
            <th>Transportation Availability</th>
            <th>Department/Team</th>
            <th>Return to Office Date</th>
            <th>Willingness</th>
         </tr>
     </thead>
     <tbody>
         <tr>
            <td></td>
            <td>Sample</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
          <tr>
            <td></td>
            <td>Sample2</td>
            <td>1</td>
            <td>123</td>
            <td>asd</td>
            <td>asd</td>
            <td>asd</td>
            <td>asd</td>
            <td>asd</td>
          </tr>
     </tbody>

And I have the script which enable the dataTable to have both vertical and horizontal scrolling and supposedly the checkboxes on the first-child of the table.

<script>
        $(document).ready(function () {
            $('#employeeList').dataTable({
                "scrollX": true,
                "scrollY": 350,
                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                }],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                }
            });
            $('.dataTables_length').addClass('bs-select');
        });

Is there something I missed? Thank you very much for the help.

so I am working with dataTables and I am having trouble on showing the checkboxes on my tables. So I have this code:

<table id="employeeList" class="table table-sm table-bordered table-hover" cellspacing="0" width="200%">
      <thead class="blue lighten-2">
         <tr>
            <th>RTO</th>
            <th>Name</th>
            <th>Address</th>
            <th>RTO Score</th>
            <th>Production Machine</th>
            <th>Transportation Availability</th>
            <th>Department/Team</th>
            <th>Return to Office Date</th>
            <th>Willingness</th>
         </tr>
     </thead>
     <tbody>
         <tr>
            <td></td>
            <td>Sample</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
          <tr>
            <td></td>
            <td>Sample2</td>
            <td>1</td>
            <td>123</td>
            <td>asd</td>
            <td>asd</td>
            <td>asd</td>
            <td>asd</td>
            <td>asd</td>
          </tr>
     </tbody>

And I have the script which enable the dataTable to have both vertical and horizontal scrolling and supposedly the checkboxes on the first-child of the table.

<script>
        $(document).ready(function () {
            $('#employeeList').dataTable({
                "scrollX": true,
                "scrollY": 350,
                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                }],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                }
            });
            $('.dataTables_length').addClass('bs-select');
        });

Is there something I missed? Thank you very much for the help.

• javascript
• html
• bootstrap-4

• You need to move the <tbody> tag under </thead>, check if this solve. – rxdue Commented Jun 11, 2020 at 18:35
• Oh yes sorry, it is normally outside the <thead> tag. I mistyped it when I am creating this. It is still not working tho. – Rey Commented Jun 11, 2020 at 18:47

1 Answer 1

Datatable is case-sensitive, check your line $('#employeeList').dataTable({ and then check mine below:

$(document).ready(function() {
  $('#employeeList').DataTable({
    "scrollX": true,
    "scrollY": 350,
    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    }],
    select: {
      style: 'os',
      selector: 'td:first-child'
    }
  });
  $('.dataTables_length').addClass('bs-select');
});

Also be sure to include these in your head tag:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/select/1.3.1/css/select.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery./jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables/select/1.3.1/js/dataTables.select.min.js"></script>