jQuery 数据表列过滤器带排序

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>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>g.winters@datatables.net</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>a.cox@datatables.net</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();
        }
    });
});