Question

我试图编辑使用选择输入的数据表示例中的选项，并且它们的示例工作正常。但是，我希望这可以在构建下拉列表的另一个元素上进行。

我已经安装好了，因此它会填充下拉列表，这很棒，但是，如果我单击任何选项，都不会发生。我尝试将mvn clean package -DskipTests更改为.on "change"，但是我刚得到一个"click"不支持该对象。

这是我的代码。

.replace

这是我在函数内的Js代码。

<div class="hidden-sm hidden-xs" id="htmToolbar">
    <ul class="nav-xs" id="htmTools">
        <li class="dropdown-submenu">
            <a style="cursor: pointer;">Manufacturer &nbsp;<i class="fa fa-th-list"></i></a>
            <ul id="Manufacturer" class="dropdown-menu" id="StartersTool">
                <li class="dropdown-header">Filter By</li>
            </ul>
        </li>
    </ul>
</div>

<div class="hidden-sm hidden-xs" id="htmToolbar">
    <ul class="nav-xs" id="htmTools">
        <li class="dropdown-submenu">
            <a style="cursor: pointer;">Software Tag &nbsp;<i class="fa fa-th-list"></i></a>
            <ul id="SoftwareTag" class="dropdown-menu" id="StartersTool">
                <li class="dropdown-header">Filter By</li>      
            </ul>
        </li>
    </ul>
</div>

<div class="hidden-sm hidden-xs" id="htmToolbar">
    <ul class="nav-xs" id="htmTools">
        <li class="dropdown-submenu">
                <a style="cursor: pointer;">Status &nbsp;<i class="fa fa-th-list"></i></a>
                <ul id="Status" class="dropdown-menu" id="StartersTool">
                    <li class="dropdown-header">Filter By</li>
                </ul>
        </li>
    </ul>
</div>

任何帮助都是非常有用的

Answer 1

问题在于您要附加的内容以及如何注册点击事件。

首先，您将<option>附加到<ul> ...显然是无效的标记。我建议您使用一些<li>。

第二，您是在整个<ul>而不是用户单击的<option>（现在为<li>）上注册click事件。这就是为什么.val()方法无法获得期权价值的原因。

第三，由于您应该使用<li>，因此将.val()更改为.text()。

这是一个演示：

$('#Ttable').DataTable({
  initComplete: function(){
    
    // Have this variable accessible for the whole initComplete
    var column;
    
    // Iterate the column
    this.api().columns([1]).every( function(){

      column = this;
      var select = $('<li style="width:300px;" class="pickList Manlist"></li>')
      .appendTo( $("#Manufacturer"));

      column.data().unique().sort().each( function ( d, j ){
        select.append( '<li class="dropdown-item">'+d+'</li>' );
      });
    });
    
    // Once all appendings are done, register a click handler
    $("#Manufacturer li.dropdown-item").on( 'click', function(){
        var val = $(this).text();
        console.log(val);

        column
          .search( val ? '^'+val+'$' : '', true, false )
          .draw();
      });
  },
  scrollY:"500px",
  scrollCollapse: true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

<div class="hidden-sm hidden-xs" id="htmToolbar">
  <ul class="nav-xs" id="htmTools">
    <li class="dropdown-submenu">
      <a style="cursor: pointer;">Manufacturer &nbsp;<i class="fa fa-th-list"></i></a>
      <ul id="Manufacturer" class="dropdown-menu" id="StartersTool">
        <li class="dropdown-header">Filter By</li>
      </ul>
    </li>
  </ul>
</div>

<table id="Ttable">
  <thead>
    <tr>
      <th>column 1</th>
      <th>column 2</th>
      <th>column 3</th>
      <th>column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>something 1</td>
      <td>something 2</td>
      <td>something 3</td>
      <td>something 4</td>
    </tr>
    <tr>
      <td>something 5</td>
      <td>something 6</td>
      <td>something 7</td>
      <td>something 8</td>
    </tr>
    <tr>
      <td>something 9</td>
      <td>something 10</td>
      <td>something 11</td>
      <td>something 12</td>
    </tr>
  </tbody>
</table>

CodePen

数据表在与页脚不同的元素中进行单个列搜索（选择输入）

1 个答案: