在angular datatable中，在顶部而不是底部进行单列搜索。

Question

我正在使用这个图书馆 https:/l-lin.github.ioangular-datatables#welcome 在我的angular 7项目中，我已经实现了示例中的代码，因为它是。https:/l-lin.github.ioangular-datatables#advancedindividual-column-filtering。.

它的工作是完美的，但唯一的问题是搜索列的位置，我希望搜索列在标题后的列名，我试着转换了 tfoot 到 thead 但它不工作。

我找到了一些例子，比如 http:/live.datatables.netcutucahi1edit。但exmaple正在替换标题栏与搜索框，我不希望这样做

Answer 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.netexamplesapimulti_filter.html。 -- 在评论部分： 给出了多种解决方案。

Answer 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+' />' );
} );

这将解决你的问题。

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

查看

Answer 3

为了得到这一切 input[type=text](搜索框)下面的所有列名分别必须是 附加 将你的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();
            }
        } );
    } );
} );

点击这里查看 工作实例