DataTable jquery在表头下放置输入字段

Question

我正在寻找在 DataTable 中搜索的方法。 this is what is found。我希望搜索框位于标题下方。我尝试了类似这种bur的方法失败了

有人可以帮助我如何在数据表顶部制作搜索框以过滤数据。

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('<input type="text" placeholder="Search ' + title + '" />');
  });

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