Question

我正在尝试根据用户从表格中的文本框中输入的输入来搜索记录。它没有正确显示记录。请帮忙。我试图在各个文本框的onchange（）中获取记录;它不起作用。

这是我的JSFiddle：

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

JSFiddle link

Answer 1

您的代码运行正常，问题是因为列索引基于0，因此您需要在错误的列中查找值，例如：

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

Updated fiddle

另请注意，您可以使用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>

var $table = $("#datatable").DataTable();
$('.search').on('keyup change', function() {
    $table
        .column($(this).data('column'))
        .search(this.value)
        .draw();
});

Updated fiddle

Answer 2

您还需要使用'keyup'监听器。更改仅在文本输入字段失去焦点时发生。

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

2 个答案: