Jquery 如何将DataTables中的单个搜索列输入放置在页面中多个表的标题处

我的页面中有多个带有class=“example”的表。我已使用以下代码在我的表上应用了单个列搜索：

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

    // DataTable
    $('.example').each(function(){
       var table = $(this).DataTable();

       table.columns().every( function () {
           var that = this;
           $( 'input', this.footer() ).on( 'keyup change', function () {
               if ( that.search() !== this.value ) {
                    that.search( this.value ).draw();
            }
        });
      });
    });
  $('.example tfoot th').appendTo('.example thead'); //Problem
} );

---

但我不知道如何在里面使用它。我尝试了很多东西，但都不管用

您可以使用

$.each（）

，

Array.prototype.forEach（）

或任何您喜欢的方法获取页面上的所有数据表，并添加必要的搜索输入。

您可以使用

$获取页面上的所有数据表，而不是简单地使用
$迭代
，
Array.prototype.forEach（）
或任何您喜欢的方法，并附加必要的搜索输入。
以获得所需的功能

您需要更改jQuery代码，以便在表的页眉而不是页脚中创建搜索框

对于当前代码，有两行代码指定要在
HTML标记上完成的工作

第3行：
$（'.example-tfoot-th'）。每个（函数（）{

第13行：
$（'input'，this.footer（））.on（'keyup change'，function（）{

只需更改这些行，以反映您希望在
中执行此操作

$(document).ready(function() {
    // Setup - add a text input to each HEADER cell
    $('.example thead th').each( function () {
        var title = $(this).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.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );
} );

$（文档）.ready（函数（）{
//设置-向每个标题单元格添加文本输入
$（'.example thead th'）。每个（函数（）{
var title=$（this.text（）；
$（this.html（“”）；
} );
//数据表
var table=$（'.example'）.DataTable（）；
//应用搜索
table.columns（）.every（函数（）{
var=这个；
$（'input'，this.header（））.on（'keyup change'，function（）{
如果（that.search（）！==this.value）{
that.search（this.value）.draw（）；
}
} );
} );
} );

Codepen示例：
获取所需的功能

您需要更改jQuery代码，以便在表的页眉而不是页脚中创建搜索框

对于当前代码，有两行代码指定要在
HTML标记上完成的工作

第3行：
$（'.example-tfoot-th'）。每个（函数（）{

第13行：
$（'input'，this.footer（））.on（'keyup change'，function（）{

只需更改这些行，以反映您希望在
中执行此操作

$(document).ready(function() {
    // Setup - add a text input to each HEADER cell
    $('.example thead th').each( function () {
        var title = $(this).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.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );
} );

$（文档）.ready（函数（）{
//设置-向每个标题单元格添加文本输入
$（'.example thead th'）。每个（函数（）{
var title=$（this.text（）；
$（this.html（“”）；
} );
//数据表
var table=$（'.example'）.DataTable（）；
//应用搜索
table.columns（）.every（函数（）{
var=这个；
$（'input'，this.header（））.on（'keyup change'，function（）{
如果（that.search（）！==this.value）{
that.search（this.value）.draw（）；
}
} );
} );
} );

代码开放示例：
您希望的结果是在
和
中进行搜索？还是仅在标题中？仅在标题中？我提供的答案帮助您解决了问题？您希望的结果是在
和
中进行搜索？还是仅在标题中？仅在标题中？我提供的答案ided帮你解决了这个问题？