javascript - 在单独的行上添加单独的列搜索

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

您需要创建另一行。

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];
}));

<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>