javascript - 数据表复选框未显示在表格上

Question

所以我正在使用dataTables，但在我的表格上显示复选框时遇到了麻烦。所以我有这个代码：

<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>

我有一个脚本，它使 dataTable 能够同时进行垂直和水平滚动，并且应该是表的第一个子项上的复选框。

<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');
        });

有什么我错过的吗？非常感谢你的帮助。

标签： javascripthtmlbootstrap-4

Answer 1

Datatable 区分大小写，请检查您的行$('#employeeList').dataTable({，然后在下面检查我的行：

$(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');
});

还要确保在你的 head 标签中包含这些：

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

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