数据表Jquery单独搜索字段下的每一个

我试图在数据表中获得表头下面的搜索字段，但它不起作用。更不用说正常的例子了，它在页脚也不适合我。

我用这个作为例子:https://datatables.net/examples/api/multi_filter.html

但由于某种原因，它对我不起作用。在示例的代码中，它说要创建具有完全相同数据作为头部的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行's在表中没有任何输入字段。我哪里做错了?