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

标签 javascript jquery datatable datatables

我有一张 table 。该表中有一个 status包含文本 active 的列, inactivewarning 。我为 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();
  }
});

最佳答案

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

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

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

关于javascript - 使用 DataTable search() 搜索唯一值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59154717/

相关文章:

javascript - Google Feed API - 返回媒体 :thumbnail

jquery - Django:重建通过 $.post 发送的结构化参数

javascript - 为什么我在 JavaScript 中遇到语法错误?

javascript - 并行上传 :10 calling multiple times success function

php - 插入符合 HTML5 标准的外部 html 内容的最佳方式? PHP、HTML5、JavaScript 方法

java - 单击按钮时调用 java 方法

javascript - 如何创建一个先快后慢的间隔?

javascript - 为 DataTables.js 元素提供特定的 id/class/names

c# - 如何将 `linq` 的结果返回到 DataTable?

c# - DataTable.Expression方法不使用C#整数除法