我的问题与DataTables : filtering different types of filtering on individual columns相似，但是这个问题没有得到解答，所以我希望有人可以帮助我们。
我使用的是jQuery Datatables 1.10.8，我目前对我的6列中的4列进行了单独的列过滤（最后一列不需要过滤）。
我想做的是这样的：
- 第1-4栏：＆＃34;文本输入＆＃34;过滤
- 第5栏：＆＃34;选择＆＃34;过滤
我试图在表格中使用多种过滤器类型，但我找不到任何可以帮助我的东西。
这是我目前的代码：
HTML：
<table class='table datatable-column-search-inputs table-hover table-striped table-bordered'>
<thead>
<tr>
<th>ID</th>
<th>OBJECT ID</th>
<th>PREFERRED</th>
<th>DESCRIPTION</th>
<th>CATEGORY</th>
<th class='text-center'>EDIT</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>nai_comp_1</td>
<td>1A-35</td>
<td>Compressor 1 - Suction</td>
<td>Analog Input</td>
<td><button class='btn btn-sm btn-info'><i class='fa fa-edit'></i></button></td>
</tr>
<tr>
<td>2</td>
<td>nao_comp_1_en</td>
<td>1B-35</td>
<td>Compressor 1 - Enable</td>
<td>Analog Output</td>
<td><button class='btn btn-sm btn-info'><i class='fa fa-edit'></i></button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class='tfoot_search'>ID</td>
<td class='tfoot_search'>OBJECT ID</td>
<td class='tfoot_search'>GROUP</td>
<td class='tfoot_search'>DESCRIPTION</td>
<td class='tfoot_select'>CATEGORY</td>
<td></td>
</tr>
</tfoot>
</table>
jQuery的：
//Setup jQuery DataTables
$(function() {
$.extend( $.fn.dataTable.defaults, {
autoWidth: false,
columnDefs: [{
orderable: false,
width: '100px',
targets: [ 5 ]
}],
dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
language: {
search: '<span>Filter:</span> _INPUT_',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' }
},
drawCallback: function () {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
},
preDrawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
}
});
//Uses jQuery Datatable API to include <input type='text' searchable filters
$('.tfoot_search').each(function() {
var title = $('.datatable-column-search-inputs thead th').eq($(this).index()).text();
$(this).html('<input type="text" class="form-control input-sm" placeholder="Search '+title+'" />');
});
var table = $('.datatable-column-search-inputs').DataTable();
table.columns().every( function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
that.search(this.value).draw();
});
});
////////////// ***** EXPERIMENTAL CODE **** REF ONLY ***** ////////////////
// --- This is to make it to where all "td" elements in a footer have "select" elements for filtering --- //
$('.datatable-column-search-selects').DataTable({
initComplete: function () {
this.api().columns().every( function() {
var column = this;
var select = $('<select class="filter-select" data-placeholder="Filter"><option value=""></option></select>')
.appendTo($(column.footer()).not(':last-child').empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
});
column.data().unique().sort().each( function (d, j) {
select.append('<option value="'+d+'">'+d+'</option>')
});
});
}
});
答案 0 :(得分：0)
******已解决******
终于解决了。现在这是我的整个代码（与上面的编辑相比）
jQuery的：
//NO CHANGES HERE
$.extend( $.fn.dataTable.defaults, {
autoWidth: false,
columnDefs: [{
orderable: false,
width: '100px',
targets: [ 5 ]
}],
dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
language: {
search: '<span>Filter:</span> _INPUT_',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' }
},
drawCallback: function () {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
},
preDrawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
}
});
//NO CHANGES HERE
$('.tfoot_search').each(function() {
var title = $('.datatable-column-search-inputs thead th').eq($(this).index()).text();
$(this).html('<input type="text" class="form-control input-sm" placeholder="Search '+title+'" />');
});
//**** CHANGES HERE ****
$('.datatable-column-search-inputs').DataTable({
initComplete: function () {
this.api().columns().every( function () {
var column = this;
if ($(column.footer()).hasClass('tfoot_search')) {
var that = this;
$('input', this.footer()).on('keyup change', function () {
that.search(this.value).draw();
});
} else if ($(column.footer()).hasClass('tfoot_select')) {
var column = this;
var select = $('<select class="filter-select" data-placeholder="Filter"><option value=""></option></select>')
.appendTo($('td.tfoot_select').empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
});
column.data().unique().sort().each( function (d, j) {
select.append('<option value="'+d+'">'+d+'</option>')
});
}
});
}
});
答案 1 :(得分：0)
我注意到上面的代码在尝试执行多个选择下拉时包含一个错误。
使用下面的代码使用多个选择下拉列表：
$('.datatable-column-search-inputs').DataTable({
initComplete: function() {
this.api().columns().every(function() {
var column = this;
if ($(column.footer()).hasClass('tfoot_search')) {
var that = this;
$('input', this.footer()).on('keyup change', function() {
that.search(this.value).draw();
});
} else if ($(column.footer()).hasClass('tfoot_select')) {
//Updated this section
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
}
});
}
});