我用一个小网格来测试JQuery DataTable列过滤器,但是当我运行网站时,网格标题和包含输入字段的行都包含排序类属性。
我正在使用以下版本的Jquery和bootstrap:
我正在使用以下版本的Jquery和bootstrap:
- Jquery版本:v2.1.4
- JQuery DataTables版本:1.10.19
- Bootstrap版本:v4
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 });
});
我的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>
table.column(i).search()
时,table
引用的是一个DataTable
,但如果你在其他地方引用,你可以稍后执行$('#datatable1).dataTable().api()
。这只是为了灵活性的另一个指针。 - Jack