javascript - 使用 DataTable search() 搜索唯一值

Question

我有一张 table 。该表中有一个 status包含文本 active 的列, inactive和warning 。我为 status 制作了一个过滤器列，但问题是当过滤器为 active 时然后inactive还显示了行。

如果用户选择active，我该如何做到这一点？ , inactive没有显示？

<select name="status" id="status" class="form-control">
  <option value="">Select Status</option>
  <option value="active">active</option>
  <option value="inactive">inactive</option>
  <option value="warning">warning</option>
</select>

$("#status", this).on("click", function() {
  if (SomeTable.column(4).search() !== this.value) {
    SomeTable
      .column(4)
      .unique()
      .search(this.value)
      .draw();
  }
});

Answer 1

最好在选择上使用更改功能而不是单击

<select name="status" id="status" onchange="filterData(event)" class="form-control">
<option value="">Select Status</option>
<option value="active">active</option>
<option value="inactive">inactive</option>
<option value="warning">warning</option>

----------------------功能就像---------------------- ------

function filterData(event) {
    debugger
    var status = event.target.value;
    var rows = $("#myTable tr");
    rows.each(function (index, element) {
        if (!status)
            $(element).show();
        if (index > 0 && status) {
            if (status.toLowerCase() !== element.children[3].innerText.toLowerCase())
                $(element).hide();
            else
                $(element).show();
        }
    })
}

--------表格------------------

<table id="myTable">
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Action</th>
</tr>
<tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Active</td>
</tr>
<tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Warning</td>
</tr>
<tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>InActive</td>
</tr>
<tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>Warning</td>
</tr>
<tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td>InActive</td>
</tr>
<tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td>Active</td>
</tr>

----------为您的表提供名称并检查该行具有事件、非事件、警告操作的子元素---