javascript - 数据表全选复选框

Question

我正在尝试创建一个具有“全选”功能的数据表，该功能将选择每一行。我有一个带有复选框的 WIP jsfiddle，您可以使用它来选择每一行，并且我创建了一个复选框列标题，当您单击它时，它会选择所有行，如果您取消选择一行，则全选框变为未选中状态。

我正在尝试复制此答案中的功能：Datatables Select All Checkbox

我在 jsfiddle 中有我的代码：https ://jsfiddle.net/martinradio/a9bjtLkr/62/

我像这样用 js / html /css 创建了我的数据表，我在另一个链接问题的解决方案中添加了，但是我的 jsfiddle 数据表仍然不会全选？

$(document).ready(function () {

let dataset = [
  ["<input type='checkbox'>", "img1", "23443", "a"],
  ["<input type='checkbox'>", "img2", "999", "b"],
  ["<input type='checkbox'>", "img3", "777", "z"],
  ["<input type='checkbox'>", "img2", "999", "b"],
  ["<input type='checkbox'>", "img3", "777", "z"],
 ]

let myProductGapsTable = $('#myProductGapsTable').DataTable({
      retrieve: true,
      scrollY: "60vh", 
      scrollX: true,
      scrollCollapse: true,
      paging: false,
      "autoWidth": true,
      data: dataset,
      //"sDom": 'tib',
      select: {
          //style: 'multi',
          style: 'os',
            selector: 'td:first-child',
          search: 'applied',
      },
      buttons: [ {
                        extend: 'excelHtml5',
                        text: 'excel_selected',
                        exportOptions: { rows: { selected: true, search: 'applied' } }

                    }, ],
     columnDefs: [{
        orderable: false,
        className: 'select-checkbox',
        targets: 0
    }],
  });
  
  myProductGapsTable.on("click", "th.select-checkbox", function() {
    if ($("th.select-checkbox").hasClass("selected")) {
        myProductGapsTable.rows().deselect();
        $("th.select-checkbox").removeClass("selected");
    } else {
        myProductGapsTable.rows().select();
        $("th.select-checkbox").addClass("selected");
    }
}).on("select deselect", function() {
    ("Some selection or deselection going on")
    if (myProductGapsTable.rows({
            selected: true
        }).count() !== myProductGapsTable.rows().count()) {
        $("th.select-checkbox").removeClass("selected");
    } else {
        $("th.select-checkbox").addClass("selected");
    }
});

  //use custom export excel button
  $('#exportExcelProductGaps').click(function () {
      myProductGapsTable.button(0).trigger()
  });

  
  })

table.dataTable tr th.select-checkbox.selected::after {
    content: "✔";
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px;
}

<button id='exportExcelProductGaps'>
download excel
</button>
<div id='myProductGapsTableContainer' class="table-responsive">
      <table class="table table-sm card-table" id='myProductGapsTable' class="display" width="100%">
          <thead>
              <tr>
                  <th><input id='selectAllProductGaps' type="checkbox"></th> 
                  <th><a href="javascript:;" class="text-muted sort" >Img</a></th>
                  <th><a href="javascript:;" class="text-muted sort" data-sort="UPC">UPC / SKU</a></th>
                  <th><a href="javascript:;" class="text-muted sort" data-sort="Parent SKU">Parent SKU</a></th>
              </tr>
          </thead>
          <tbody class="list">
          </tbody>
      </table>
  </div>

标签： javascripthtmljquerydatatable