jQuery datatable column filter with sort

Question

I implemented a small grid to test the JQuery DataTable column filter, but when I execute the site, both the grid header and the line that contains the input fields, contains the sorting class attribute

I'm using this version of Jquery and bootstrap

1. Jquery version: v2.1.4
2. JQuery DataTables: 1.10.19
3. Bootstrap: v4

My code JS code:

var table = $('#datatable1').DataTable({
    "orderCellsTop": true,
    "responsive": true
});

$('#datatable1 thead tr').clone(true).appendTo('#datatable1 thead');
$('#datatable1 thead tr:eq(1) th').each(function (i) {
    var title = $(this).text();
    $(this).html('<input type="text" class="col-md-11 form-control" placeholder="Filtrar ' + title + '" />');

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

// Select2
$('.dataTables_length select').select2({ minimumResultsForSearch: Infinity });

});

My html:

    <table id="datatable1" class="table display responsive nowrap table-bordered">
        <thead>
            <tr>
                <th class="wd-15p">First name</th>
                <th class="wd-15p">Last name</th>
                <th class="wd-20p">Position</th>
                <th class="wd-15p">Start date</th>
                <th class="wd-10p">Salary</th>
                <th class="wd-25p">E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>

Answer 1

var table = $('#datatable1').DataTable({
    "orderCellsTop": true,
    "responsive": true
});

$('#datatable1 thead tr')
  .clone(true)
  .find('th')
    .removeClass('sorting_asc sorting_asc sorting')
    .off('click')
    .end()
  .appendTo('#datatable1 thead');

$('#datatable1 thead tr:eq(1) th').each(function (i) {
    var title = $(this).text();
    $(this).html('<input type="text" class="col-md-11 form-control" placeholder="Filtrar ' + title + '" />');

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