jQuery Datatable column search

Question

I am using jQuery Datatable and I am using it column search feature.

I have added it successfully in the header but it's coming after thead titles I need it before thead titles while by using table eq(0) I am able to place it before titles but sorting is coming with it.

$('#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>

Answer 1

Changing your jQuery selector so it selects the first row did the trick.

$('#myApprovalTable thead tr:eq(1) th')

to

$('#myApprovalTable thead tr:eq(0) th')

EDIT: To make sure sorting works as intended I did the following:

• I switched the order of your code. First the Datatable is initialized before adding the search logic.
• Also I removed the true parameter of the clone method to prevent event handlers of Datatable being cloned
• Last I prepended the cloned elements with prependTo instead of appendTo() so the cloned table heading is being changed instead of the original one.

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>