搜索框在数据表中不起作用答案

【问题标题】：Searchbox not working in datatable搜索框在数据表中不起作用
【发布时间】：2017-05-17 09:05:21
【问题描述】：

我们将搜索框放在第二个标题中，因为搜索框在所有列中都不起作用

第一个用于排序的标题和第二个用于搜索框的标题

排序正常，但搜索框不工作

我们在搜索框中写入任何值但没有搜索记录

我们的 HTML 代码

<thead>
    <tr>
        <td><b>Customer Name</b></td>
        <td><b>Contact Number</b></td>
        <td><b>Contact Person Name</b></td>
        <td><b>Contact Person Contact Number</b></td>
        <td><b>City</b></td>
        <td><b>Country</b></td>
        <?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin' || $_SESSION['user_type'] == 'Director') { ?><td><b>Sales user name</b></td><?php } ?>
        <td><b>Schedule</b></td>
        <?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin') { ?><td><b>Created User</b></td><?php } ?>
        <td><b>Action</b></td>
        <?php if($_SESSION['user_type'] != 'Director' ){ ?>
        <td><b>Add</b></td>
        <?php } ?>
    </tr>
</thead>
<thead>
    <tr>
        <th>Customer Name</th>
        <th>Contact Number</th>
        <th>Contact Person Name</th>
        <th>Contact Person Contact Number</th>
        <th>City</th>
        <th>Country</th>
        <?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin' || $_SESSION['user_type'] == 'Director') { ?><th>Sales user name</th><?php } ?>
        <th>Schedule</th>
        <?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin') { ?><th>Created User</th><?php } ?>
        <th>Action</th>
        <?php if($_SESSION['user_type'] != 'Director' ){ ?>
        <th>Add</th>
        <?php } ?>
    </tr>
</thead>

我们的 Jquery 代码

$('#example1 thead th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

// DataTable
var table = $('#example1').DataTable();

// Apply the search
table.columns().every( function () {
    var that = this;
    //alert(1);
    $( 'input', this.header() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

【问题讨论】：

表结构应该类似于 TABLE -> THEAD -> TBODY 您当前的结构无效。
TBODY 已添加，我们还添加了两个 thead & 1 tbody & 1 tfoot
去掉一个再试试。
如果删除一个然后搜索框和排序两者同时工作，如果我点击搜索框然后排序运行搜索值
在表结构中只创建一个 THEAD 标签。如果您需要其他 ROW，则使用搜索创建 TR

标签： jquery datatable datatables

【解决方案1】：

从示例中复制粘贴代码很少适用于不同场景或先决条件更改时。如果你想让上面的代码工作，你必须至少定位第二个<thead>，当你插入<input>时：

$('#example1 thead:eq(1) th').each(function() {
   var title = $(this).text();
   $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});

注意thead:eq(1) 选择器，您在上面使用<td> 而不是<th> 的hack 非常糟糕。不要试图愚弄逻辑！如果目的是实现基于列的搜索，那么您的“应用搜索”是完全错误的。您使用的代码每次都在 all 列中连续搜索，它不是基于列的。在注入的<inputs> 上实现的基于列的搜索将如下所示：

$('input', '#example1 thead:eq(1)').each(function(index, input) {
  $(input).on('keyup change', function() {
    table.column(index).search( this.value ).draw();
  })
})

这为您提供了基于多列的搜索，您可以在其中优化每个<input> 中的搜索。

工作演示 -> http://jsfiddle.net/xbdr7qfj/

【讨论】：