在单独的行上添加单个列搜索

Question

我想添加文本框来搜索我的数据表（我已经完成了）但是它们的位置与我的行标题位于同一个<Tr>。

正如你在这里看到的那样：

但是我想把输入放在单独的行上，所以它们就像这样分开：

我的代码：

if (!$.fn.DataTable.isDataTable('.table')) {
    $('.table thead th').each( function (i) {
        var title = $('.table thead th').eq( $(this).index() ).text();
        $(this).after('<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
    } );

    var table = $('.table').DataTable( {
        paging:         false
    } );


    $( table.table().container() ).on( 'keyup', 'thead input', function () {
        table
            .column( $(this).data('index') )
            .search( this.value )
            .draw();
    } );
}

我怎样才能做到这一点？

Answer 1

您需要创建另一行。

＆＃13;

＆＃13;

var ths = $('.table thead th');
var searchTr = $('<tr></tr>');
searchTr.insertAfter(ths.parents('tr'));
searchTr.append(ths.map(function (i) {
  var title = $(this).text();
  return $('<td><input type="text" placeholder="Search '+title+'" data-index="'+i+'" /></td>')[0];
}));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>Header1</th><th>Header2</th><th>Header3</th><th>Header4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Content1</th><th>Content2</th><th>Content3</th><th>Content4</th>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;