Question

我有一张桌子。在该表中，有一个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上使用更改功能，而不要单击

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

----------为表提供一个名称，还检查子元素该行具有活动，非活动，警告的行为---

Answer 2

问题是因为默认情况下，数据表search()仅在单元格文本中查找字符串 anywhere 。这样，您搜索“活动”也会找到“无效”单元格。

要解决此问题，请使用正则表达式执行搜索，并使用^和$锚定值：

$("#status", this).on("change", function() {
  if (SomeTable.column(4).search() !== this.value) {
    SomeTable
      .column(4)
      .unique()
      .search('^' + this.value + '$', true, false)
      .draw();
  }
});

有关更多信息，请参见DataTables search() documentation

使用DataTable search（）搜索唯一值

2 个答案:

最好在select上使用更改功能，而不要单击