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

Jquery version: v2.1.4
JQuery DataTables: 1.10.19
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>

Mischa · Accepted Answer · 2019-10-28 16:20:25Z

5

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();
        }
    });
});

edited Oct 28, 2019 at 16:20

answered Oct 28, 2019 at 16:17

Mischa

1,70110 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

snapper Over a year ago

I have been trying to make this work all afternoon. Well done!!!!

Jack Over a year ago

You can also use the Datatable API, like when you do table.column(i).search(), the table reference is a DataTable, but you can instead later do $('#datatable1).dataTable().api() if you were to reference elsewhere. Just another pointer for flexibility.

Collectives™ on Stack Overflow

jQuery datatable column filter with sort

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related