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

我假设您有多个表，每个表都有"@angular-devkit/architect": { "version": "0.8.9", "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.8.9.tgz", "integrity": "sha512-2tiGPkvJyFY/G3a27uC8r6Jj3H5m8SxjMqhjNUQ5AtNumweTBPt3YIYMNAvHUmxG0nA9upDolVXFmoQGK9AhKQ==", "dev": true, "requires": { "@angular-devkit/core": "0.8.9", "rxjs": "6.2.2" }, "dependencies": { "rxjs": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz", "integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==", "dev": true, "requires": { "tslib": "^1.9.0" } } } },。问题是，当您执行<p id="selectTriggerFilter">时，选择器会在整个HTML文档中找到第一个.appendTo('#selectTriggerFilter')并将其附加到后一个，即第一个表的过滤器div。

我将采用以下方式

HTML：

#selectTriggerFilter

Javascript：

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

Answer 2

首先请注意，您的HTML无效，因为当您重复相同的id时，它们必须是唯一的。将selectTriggerFilter更改为课程。

关于该问题，this处理函数中的initComplete将引用调用table的{{1}}元素。因此，您需要使用dataTable()来获取同级prev()元素，而不是`closest（），因为它会寻找子节点。试试这个：

.selectTriggerFilter

<p class="selectTriggerFilter">
  <b>FILTER:</b><br>
</p>
<table class="table table-hover dataTable"></table>

<p class="selectTriggerFilter">
  <b>FILTER:</b><br>
</p>
<table class="table table-hover dataTable"></table>

附加到最近的选择

2 个答案: