角度数据表中顶部而不是底部的单个列搜索答案

【问题标题】：Individual column search on top rather than bottom in angular datatable角度数据表中顶部而不是底部的单个列搜索
【发布时间】：2020-05-05 11:59:03
【问题描述】：

我将这个库 https://l-lin.github.io/angular-datatables/#/welcome 用于我的 Angular 7 项目我已经按照给出的示例实现了代码，https://l-lin.github.io/angular-datatables/#/advanced/individual-column-filtering。

它工作得很好，但唯一的问题是搜索列的位置，我想要列名之后的标题中的搜索列，我尝试将tfoot 转换为thead，但它不起作用。

我找到了一些像http://live.datatables.net/cutucahi/1/edit 这样的例子，但例子是用我不想要的搜索框替换标题列

【问题讨论】：

标签： javascript css angular datatables angular-datatables

【解决方案1】：

试试下面的例子

initComplete: function ()
{
  var r = $('#MyDataTable tfoot tr');
  r.find('th').each(function(){
    $(this).css('padding', 8);
  });
  $('#MyDataTable thead').append(r);
  $('#search_0').css('text-align', 'center');
},

如果不检查以下链接中的解决方案

https://datatables.net/examples/api/multi_filter.html - 在评论部分。给出了多种解决方案。

【讨论】：

【解决方案2】：

在表头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>

如果您注意到我又添加了一个 tr 并创建了相同的标题

在此之后在 js 文件中更改元素选择器

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

到

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

这将解决您的问题。

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

check it

【讨论】：

【解决方案3】：

为了分别获得所有列名下方的所有input[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();
            }
        } );
    } );
} );

点击这里查看Working Example

【讨论】：