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

Question

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

我已经得到它，因此它可以填充下拉列表，这很棒，但是如果我单击任何选项，则没有任何反应。我尝试将.on "change" 更改为"click"，但我只是得到.replace 不支持此对象。

这是我的代码。

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

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

$('#Ttable').DataTable
       ({
                initComplete: function () 
                    {
                    this.api().columns([1,3,4]).every( function () 
                    {
                        var column = this;
                        var select = $('<li style="width:300px;" class="pickList Manlist"></li>')
                            .appendTo( $("#Manufacturer"))
                            .on( 'click', function () 
                            {
                                var val = $.fn.dataTable.util.escapeRegex
                                (
                                    $(this).val()
                                );
                                console.log(val);
                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            });
                        column.data().unique().sort().each( function ( d, j ) 
                        {
                        select.append( '<option value="'+d+'" class="dropdown-item">'+d+'</option>' )
                        });
                    });
                    },
                    scrollY:"500px",
                    scrollCollapse: true
            }


        );

任何帮助都会非常有用

Answer 1

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

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

其次，您注册的是整个<ul> 的点击事件，而不是用户点击的<option>（现在是<li>）。这就是获取选项值的.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