Javascript 为什么这个数据表不根据我的搜索过滤器过滤数据？

我试图根据用户从表中的文本框中输入的内容搜索记录。它没有正确显示记录。请帮忙。但是，我试图在相应文本框的onchange（）中获取记录；它不起作用

这是我的JSFIDLE：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
  $(function () {
    var table = $("#datatable").DataTable();

    $('#search-id').on('change', function(){

        console.log("id called");

        table
        .column(1)
        .search(this.value)
        .draw();
    });

    $('#search-fname').on('change', function(){

        table
        .column(2)
        .search(this.value)
        .draw();
    });

    $('#search-lname').on('change', function(){

        table
        .column(3)
        .search(this.value)
        .draw();
    });

    $('#search-mobile').on('change', function(){

        table
        .column(4)
        .search(this.value)
        .draw();
    });

});
</script>
<table id="datatable" class="table table-bordered table-striped">
  <thead>
  <tr>
                    <td><input type="text" id="search-id" placeholder="Search ID"></td>
                    <td><input type="text" id="search-fname" placeholder="Search name"></td>
                    <td><input type="text" id="search-lname" placeholder="Search surnam"></td>
                    <td><input type="text" id="search-mobile" placeholder="Search mobile"></td>
                </tr>



    <tr>
      <th>Profile id</th>
      <th>Name</th>
      <th>Surname</th>
      <th>Mobile#</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Profile id</th>
      <th>Name</th>
      <th>Surname</th>
      <th>Mobile#</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Keller</td>
      <td>18411564</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Donald</td>
      <td>Duck</td>
      <td>49816156</td>
    </tr>
  </tbody>
</table>

$（函数（）{
var table=$（“#datatable”）.datatable（）；
$（'#搜索id'）。在（'change'，function（）上{
console.log（“被调用的id”）；
桌子
.第（1）栏
.search（此.value）
.draw（）；
});
$（'search fname'）。在（'change'，function（）上{
桌子
.第（2）栏
.search（此.value）
.draw（）；
});
$（'search lname'）。在（'change'，function（）上{
桌子
.第（3）栏
.search（此.value）
.draw（）；
});
$（'search mobile'）。在（'change'，function（）上{
桌子
.第（4）栏
.search（此.value）
.draw（）；
});
});
配置文件id
名称
姓
流动的#
配置文件id
名称
姓
流动的#
1.
约翰
凯勒
18411564
2.
唐纳德
鸭子
49816156

---

您的代码运行正常，问题是因为列索引基于

0

，因此您在错误的列中查找值，例如：

$('#search-id').on('change', function() {
    table
        .column(0) // id column == 0, not 1
        .search(this.value)
        .draw();
});

还请注意，使用

data-*

属性和基于类的单个事件处理程序，您可以完全干涸代码：

<tr>
    <td>
        <input type="text" class="search" data-column="0" placeholder="Search ID">
    </td>
    <td>
        <input type="text" class="search" data-column="1" placeholder="Search name">
    </td>
    <td>
        <input type="text" class="search" data-column="2" placeholder="Search surname">
    </td>
    <td>
        <input type="text" class="search" data-column="3" placeholder="Search mobile">
    </td>
</tr>

---

您还需要使用“键控”侦听器。只有当文本输入字段失去焦点时，才会发生更改。

即使我将其更改为0,1,2,3，也不起作用。你能让我看看小提琴吗？我理解你的行为。在我不将控件从文本框中移开之前，它不会显示结果。如果我想在用户停止输入后立即显示结果呢？没问题，很乐意帮助