Javascript 角度数据表中在顶部而不是底部搜索单个列

我在angular 7项目中使用这个库，我已经实现了示例中给出的代码

它工作得很好，但唯一的问题是搜索列的位置， 我希望在标题中的搜索列位于列名称之后， 我尝试将

tfoot

转换为

thead

，但它不起作用

---

我发现了一些类似的示例，但是exmaple正在用搜索框替换标题列，我不希望在表格标题html中这样做

   <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
      <tr id="test">
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr> 
    </thead>

到

$（'#示例thead#test th'）。每个（函数（）{
var title=$（this.text（）；
$（this.html（“”）；
} );

这会解决你的问题

请检查链接，我不确定是否正确加载

---

为了获得所有列名称下方的所有

输入[type=text]

（搜索框），您必须将其附加到各自的tr中 将您的js更改为

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead th').each( function () {
        var title = $(this).text();
        $(this).append( '<br><input type="text" placeholder='+title+' />' );
    } );

    // DataTable
    var table = $('#example').DataTable({
      scrollX: true
    });

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

        $( 'input', this.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

$（文档）.ready（函数（）{
//设置-向每个页脚单元格添加文本输入
$（'#示例thead th'）。每个（函数（）{
var title=$（this.text（）；
$（this.append（“
”）；
} );
//数据表
变量表=$（'#示例'）。数据表({
是的
});
//应用搜索
table.columns（）.every（函数（）{
var=这个；
$（'input'，this.header（））.on（'keyup change'，function（）{
如果（that.search（）！==this.value）{
那个
.search（this.value）
.draw（）；
}
} );
} );
} );

单击此处查看下面的示例

initComplete:函数（）
{
var r=$（'#MyDataTable tfoot tr'）；
r、 查找（'th'）。每个（函数（）{
$（this.css（'padding'，8）；
});
$（'#MyDataTable thead'）。追加（r）；
$（'search_0'）.css（'text-align'，'center'）；
}，

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

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead th').each( function () {
        var title = $(this).text();
        $(this).append( '<br><input type="text" placeholder='+title+' />' );
    } );

    // DataTable
    var table = $('#example').DataTable({
      scrollX: true
    });

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

        $( 'input', this.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );