在数据表列中使用jQuery可选复选框下拉菜单

Question

我正在尝试在数据表列复选框列表中使用jQuery可选。小提琴显示了“办公室位置”复选框的列表，这些复选框在可选状态关闭时都可以正常工作。

在启用selectable的情况下，到目前为止，我能做的就是在复选框标签之间拖动时复选框高亮显示和分配类。问题在于，数据表无法根据选择进行过滤-既不进行拖动也不进行单个标签选择。

有趣的是，如果我仅选中较小的输入框，但不确定为什么会进行过滤。我已经在.selectable（）及其过滤器中尝试了ul，li和label的所有组合，但是没有什么可以过滤表。

我认为该功能可能已与数据表断开连接，但根本不了解如何正确使用此功能。

有人可以帮忙吗？

$(document).ready(function() {
  function cbDropdown(column) {
    return $('<ul>', {
      'class': 'cb-dropdown'
    }).appendTo($('<div>', {
      'class': 'LEVEL-TWO'
    }).appendTo($('<div>', {
      'class': 'LEVEL-ONE'
    }).appendTo($('<div>', {
      'class': 'cb-dropdown-wrap'
    }).appendTo(column))));
  }

  $('#example').DataTable({
    scrollY: 'calc(100vh - 270px)',
    scrollX: '100%',
    fixedHeader: true,
    scrollCollapse: true,
    paging: false,
    processing: true,
    orderCellsTop: true,
    select: true,
    "language": {
      "search": "",
      "searchPlaceholder": "Search",
    },
    initComplete: function() {
      this.api().columns([2]).every(function(i) {
        var column = this;
        var ddmenu = cbDropdown($(column.header())).on('change', ':checkbox', function() {
          var active;
          var vals = $(':checked', ddmenu).map(function(index, element) {
            active = true;
            return $.fn.dataTable.util.escapeRegex($(element).val());
          }).toArray().join('|');

          column.search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false).draw();

          if (this.checked) {
            $(this).closest('li').addClass('active');
          } else {
            $(this).closest('li').removeClass('active');
          }

          var active2 = ddmenu.parent().is('.active');
          if (active && !active2) {
            ddmenu.parent().addClass('active');
          } else if (!active && active2) {
            ddmenu.parent().removeClass('active');
          }
        });

        column.data().unique().sort().each(function(d, j) {
          var $label = $('<label>'),
            $text = $('<span>', {
              text: d
            }),
            $cb = $('<input>', {
              type: 'checkbox',
              value: d
            });
          $text.appendTo($label);
          $cb.appendTo($label);
          ddmenu.append($('<li>').append($label));
        });
      });
    }
  });

  //Multi-checkbox dragging
  $(".cb-dropdown-wrap ul").selectable({
    filter: 'li',
    stop: function() {
      $(".ui-selected input[type='checkbox']", this).each(function() {
        this.checked = !this.checked;

        if ($(this).is(':checked')) {
          $(this).parent().addClass("LabelHighlight")
          $(this).parent().parent().addClass("active")
        } else {
          $(this).parent().removeClass("active LabelHighlight")
          $(this).parent().parent().removeClass("active")
        }
      });
    }
  });
});

.cb-dropdown-wrap {
  position: relative;
  height: 125px;
}

.cb-dropdown,
.cb-dropdown li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.cb-dropdown {
  position: absolute;
  width: 100px;
  height: 130px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #888;
}

li:hover {
  border: 1px solid blue;
}

.LabelHighlight {
  border: 1px solid #7392a5;
  background-color: #e3edf9;
  color: black;
}

<script type="text/javascript" src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script type="text/javascript" src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
<script type="text/javascript" src='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css'></script>
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Gavin Joyce</td>
      <td>Developer</td>
      <td>Edinburgh</td>
      <td>42</td>
      <td>2010/12/22</td>
      <td>$92,575</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/jgfr649m/