Question

我们将Searchbox放在第二个位置，以便搜索框无法在所有列中使用

首先进行分类＆amp;第二个thead for searchbox

排序正常，但搜索框无法正常工作

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

我们的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();
        }
    } );
} );

Answer 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非常糟糕。不要试图欺骗逻辑！然后你的＆＃34; 应用搜索＆＃34;如果目的是实现基于列的搜索，那就错了。您使用的代码每次都在 all 列中连续搜索，而不是基于列。在注入的<inputs>上实现的基于列的搜索将如下所示：

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

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

工作演示 - ＆gt;的 http://jsfiddle.net/xbdr7qfj/

Searchbox无法在datatable中工作

1 个答案: