CODEWITHSUNDEEP
datatables
kool_Coder
kool_Coder

Reputation: 149

DataTable Sorting Issue (Instead of 1st row taking 2nd row for sorting)

I have a dataTable and it has two rows in table header. One row is the column names while the other one is the input fields

I dont know but by default the sorting is being done on the input fields (2nd row) rather that the label fields (1st row)

My code for the datatable is

$('#result-table').DataTable({
  "paging": true,
  "lengthChange": false,
  "searching": true,
  "ordering": true,
  "info": true,
  "autoWidth": false,
  "responsive": true,
  
});

I am cloning the header row and adding the input field as

$("#result-table thead tr").clone(true).appendTo("#result-table thead");


// add a text input filter to each column of the new row
  $("#result-table thead tr:eq(1) th").each(function (i) {
    var title = $(this).text();
    $(this).html("<input type='text' class='form-control' placeholder='Search '" + title + "' />");
    $("input", this).on( "keyup change", function () {
      if ($("#result-table").DataTable().column(i).search() !== this.value) {
        $("#result-table").DataTable().column(i).search(this.value).draw();
      }
    });
  });

What's wrong?

Upvotes: 0

Views: 710

Answers (1)

andrewJames
andrewJames

Reputation: 21916

Here are 2 things you need to make sure you are doing:

  1. Make sure the clone() code and the code to create input fields is placed inside the $(document).ready(function() code - but it must be placed before the $('#result-table').DataTable({...}) code.

  2. Make sure your DataTables initialization includes this option:

orderCellsTop: true,

You may already be doing (1) - but (2) is missing from the code in the question.

Upvotes: 1

Related Questions