javascript - jQuery Datatable列搜索

我正在使用jQuery Datatable，并且正在使用它的列搜索功能。

我已经成功将其添加到标题中，但是它在thead标题之后，我需要它在thead标题之前，而通过使用表eq(0)，我可以将其放在标题之前，但排序随之而来。

$('#myApprovalTable thead tr').clone(true).appendTo('#myApprovalTable thead');

$('#myApprovalTable thead tr:eq(1) th').each(function(i) {
  var title = $(this).text();
  //$(this).html('<input type="text" placeholder="Search" />');
  if (title == 'Actions') {
    $(this).hide();
  }
  $(this).html('<input type="text" placeholder="' + title + '" />');

  $('input', this).on('keyup change', function() {
    if (myApproval.column(i).search() !== this.value) {
      myApproval
        .column(i)
        .search(this.value)
        .draw();
    }
  });
});
var myApproval = $('#myApprovalTable').DataTable({
  orderCellsTop: true,
  dom: 'Bfrtip',
  buttons: [{
    text: 'Reset Filter',
    action: function(e, dt, node, config) {
      $('#myApprovalTable input').val('').change();

    }
  }],
  language: {
    search: "_INPUT_",
    searchPlaceholder: "Search..."
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="myApprovalTable" class="display table-responsive" style="width:100%">
  <thead>
    <tr>
      <th>title1</th>
      <th>title2</th>
      <th>title3</th>
      <th>title4</th>
      <th>title5</th>
      <th>title6</th>
      <th>title7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

最佳答案

更改jQuery选择器，使其选择第一行就可以了。
$('#myApprovalTable thead tr:eq(1) th')
至
$('#myApprovalTable thead tr:eq(0) th')
编辑:
为了确保排序按预期进行，我做了以下工作:

我切换了代码的顺序。首先，在添加搜索逻辑之前先初始化数据表。

另外，我还删除了clone方法的true参数，以防止克隆Datatable的事件处理程序

最后，我在克隆的元素之前添加了prependTo而不是appendTo()，因此更改了克隆表的标题，而不是原始的表标题。

var myApproval = $('#myApprovalTable').DataTable({
  orderCellsTop: true,
  dom: 'Bfrtip',
  buttons: [{
    text: 'Reset Filter',
    action: function(e, dt, node, config) {
      $('#myApprovalTable input').val('').change();

    }
  }],
  language: {
    search: "_INPUT_",
    searchPlaceholder: "Search..."
  }
});

$('#myApprovalTable thead tr').clone().prependTo('#myApprovalTable thead');

$('#myApprovalTable thead tr:eq(0) th').each(function(i) {
  var title = $(this).text();
  //$(this).html('<input type="text" placeholder="Search" />');
  if (title == 'Actions') {
    $(this).hide();
  }
  $(this).html('<input type="text" placeholder="' + title + '" />');

  $('input', this).on('keyup change', function() {
    if (myApproval.column(i).search() !== this.value) {
      myApproval
        .column(i)
        .search(this.value)
        .draw();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="myApprovalTable" class="display table-responsive" style="width:100%">
  <thead>
    <tr>
      <th>title1</th>
      <th>title2</th>
      <th>title3</th>
      <th>title4</th>
      <th>title5</th>
      <th>title6</th>
      <th>title7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
  </tbody>
</table>