DataTablejquery将输入字段放在表头下

Question

我正在寻找在DataTable中搜索的方法。这就是发现的。我希望搜索框位于标题下方的顶部。我试过一些类似的东西，但失败了

有人能帮我如何在数据表顶部制作搜索框来过滤数据吗。

html字段

<table id="tabular_datas" class="table table-bordered table-striped">
<thead>
<tr>
<th>Time</th>
<th>CPU Load</th>
<th>Memory Utilization</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>Time</td>
<td>CPU Load</td>
<td>Memory Utilization</td>
</tr>
</tfoot>
</table>

JavaScript字段

$('#tabular_datas th').append('<tr><td>Time</td><td>CPU Load</td><td>Memory Utilization</td></tr>');
$('#tabular_datas thead th[1]').each(function () {
console.log('data searching in datatable');
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});

然后我填充数据表

$('#tabular_datas').DataTable({
destroy: true,
lenChange:true,
dom: 'Bfrtip',
// "searching": false,
buttons: [{
extend: 'excelHtml5',
title: 'Activity Log',
text: 'Export to Excel'
},
{
extend: 'pdfHtml5',
title: 'Activity Log',
text: 'Export to PDF'
},
{
extend: 'colvis',
text: 'Column Visibility'
},
],
"info": true,
"data": data,
"lengthMenu": [
[50, 100, -1],
[50, 100, "All"]
],
initComplete: function () {
// Apply the search
this.api()
.columns()
.every(function () {
console.log('obj 1 ');
var that = this;
console.log('that : ', that);
console.log('this.footer() : ', this.footer());

$('input', this.footer()).on('keyup change clear', function () {
console.log('obj 2 ');
if (that.search() !== this.value) {
that.search(this.value).draw();
console.log('obj 3 ');
}
});
});
},
});

Answer 1

要完成您所需要的操作，您可以以您提供的链接中的示例为例，更改jQuery以将输入放置在thead中，并使用this.header():附加事件

jQuery($ => {
$('#example thead th').each(function() {
var title = $(this).text();
$(this).html(`<h4>${title}</h4><input type="text" placeholder="Search..." />`);
});
// DataTable
var table = $('#example').DataTable({
initComplete: function() {
// Apply the search
this.api()
.columns()
.every(function() {
var that = this;
$('input', this.header()).on('input', function(e) {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
}).on('click', e => e.stopPropagation());
});
},
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011-07-25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009-01-12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012-03-29</td>
<td>$433,060</td>
</tr>
</tbody>
</table>