javascript - 附加到最近的选择

Question

我想将我的 DataTable 中的一个函数附加到最近的选择过滤器。我怎样才能做到这一点？我的函数工作正常，但所有选择都应用于同一个表(第一个)。

我的函数代码如下所示:

$('#table1, table2, table3').dataTable({
    initComplete: function() {
        var column = this.api().column(0); 

        var select = $('<select class="filter"><option value=""></option></select>')
          .appendTo('#selectTriggerFilter')
          .on('change', function() {
            var val = $(this).val();
            column.search(val).draw()
          });
    }
} );

HTML:

<p id="selectTriggerFilter"><label><b>FILTER:</b></label><br></p>

<table class="table table-hover dataTable" id="table1">
...
</table>


<p id="selectTriggerFilter"><label><b>FILTER:</b></label><br></p>

<table class="table table-hover dataTable" id="table2">
...
</table>

我确实尝试过使用这样的变量来替换#selectTriggerFilter:

var $filter = $(this).closest("#selectTriggerFilter");

但它没有按预期工作。

提前致谢

Answer 1

我假设您有多个表并且每个表都有 <p id="selectTriggerFilter"> .问题是当你做 .appendTo('#selectTriggerFilter') , 选择器会找到第一个 #selectTriggerFilter在整个 HTML 文档中并将其附加到那个，这将是第一个表的过滤器 div。

我的处理方式如下

HTML:

<div class="table-wrapper">
    <p class="select-filter-trigger"><label><b>FILTER:</b></label></p>
    <table class="table table-hover dataTable">
        ...
    </table>
</div>

Javascript:

initComplete: function() {
    var column = this.api().column(0);
    var target = $(this).closest('.table-wrapper')
        .find('.select-filter-trigger');

    var select = $('<select class="filter"><option value=""></option></select>')
        .appendTo(target)
        .on('change', function() {
            var val = $(this).val();
            column.search(val).draw()
        });
}