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

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> ）上注册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