Datatables Jquery 在每个 th 下都有单独的搜索字段答案

【问题标题】：Datatables Jquery seperate search fields under every thDatatables Jquery 在每个 th 下都有单独的搜索字段
【发布时间】：2015-07-23 11:22:35
【问题描述】：

我正在尝试获取数据表中表头下方的搜索字段，但它不起作用。更不用说它在页脚中的正常示例也不适合我。

我以这个为例： https://datatables.net/examples/api/multi_filter.html

但由于某种原因它对我不起作用。在示例的代码中，它说要使用与 thead 完全相同的数据创建 tfoot，但出于某种原因，它只是使用相同的数据创建了一个新行。

示例html代码：

    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

我使用与添加滚动的示例完全相同的脚本代码，即：

$(document).ready(function() {
 $('#example').dataTable( {
    "scrollY": true
} );
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
    var title = $('#example thead th').eq( $(this).index() ).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

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

// Apply the search
table.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        that
            .search( this.value )
            .draw();
    } );
} );

});

我的桌子是这样的：

<table id="example" class="display">
<thead>
<tr><th>
    //php generated code that shows header titles
</th></tr>
</thead>
<tfoot>
<tr>
<th>
    //php generated code that shows header titles
</th>
</tr>

</tfoot>
<tbody>
<tr>
<td>
//php generated code that shows body data
</td>
</tr>

</tbody>
</table>

所以我的代码目前基本上有 2 行 th，表中根本没有输入字段。我在这里做错了什么？

【问题讨论】：

标签： php jquery html datatable

【解决方案1】：

请更改代码

var title = $('#example thead th').eq( $(this).index() ).text();

到

var title = $(this).text();

您可能会在 tfoot 上找到输入字段。

【讨论】：