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
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>
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();
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.