可数据过滤器单独的列输入和选择 [英] Datatable Filter Individual Column Inputs AND selects
本文介绍了可数据过滤器单独的列输入和选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题类似于数据表：过滤不同类型的过滤单个列，但是这个问题没有得到回答，所以我希望有人可以帮助我们。
我使用的是jQuery Datatables 1.10。 8和我目前对我的6列中的4个列进行单独的列过滤（最后一列不需要过滤）。
我想要做的是这样：_
- 列1-4：文本输入过滤器
- 第5列：选择过滤器
我正在尝试在表中使用多个过滤器类型，但我找不到任何帮助我。 p>
这是我当前的代码：
HTML：
< table class ='table datatable-column-search-inputs table-hover table-striped table-bordered'>
< thead>
< tr>
< th> ID< / th>
< th> OBJECT ID< / th>
< th>首选< / th>
<描述< / 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>压缩机1 - 吸入< / td>
< td>模拟输入< / 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>压缩器1 - 启用< / td>
< td>模拟输出< / 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：
code> //设置jQuery DataTables
$（function（）{
$ .extend（$ .fn.dataTable.defaults，{
autoWidth：false，
columnDefs ：[{
orderable：false，
width：'100px'，
targets：[5]
}]，
dom：'<datatable-header fl><datatable-scrollt>"datatable-footerip>'，
language：{
search：'< span> Filter：< / span> _INPUT_' ，
lengthMenu：'< span>显示：< / span> _MENU_'，
paginate：{'first'：'First'，'last'：'Last'，'next' & rarr;'，'previous'：'& larr;'}
}，
drawCallback：function（）{
$（this）.find（'tbody tr' slice（-3）.find（'。dropdown，.btn-group'）。addClass（'dropup'）;
}，
preDrawCallback：function（）{
$（this） .find（'tbody tr'）。sli ce（-3）.find（'。dropdown，.btn-group'）。removeClass（'dropup'）;
}
}）;
//使用jQuery Datatable API包含< input type ='text'可搜索过滤器
$（'。tfoot_search'）。each（function（）{
var title = $（'。datatable-column-search-inputs thead th'）。eq（$（this）.index（））。text（）;
$（this）.html（'< input type = textclass =form-control input-smplaceholder =Search'+ title +'/>'）;
}）;
var table = $（'。datatable-column-search-inputs'）DataTable（）;
table.columns（）。every（function（）{
var that = this;
$（'input'，this.footer（））。on change'，function（）{
that.search（this.value）.draw（）;
}）;
}）;
//////////// *** ***实验代码***仅供参考***** ////// //////////
// ---这是为了让页脚中的所有td元素都有select元素进行过滤--- //
$（'。datatable-column-search-selection'）。DataTable（{
initComplete：function（）{
this.api（） {
var column = this;
var select = $（'< select class =filter-selectdata-placeholder =Filter>< option value => / option>< / select>'）
.appendTo（$（column.footer（））。not（'：last-child'）。empty（））
.on（'change' ，function（）{
var val = $ .fn.dataTable.util.escapeRegex（
$（this）.val（）
）;
列
。搜索（val？'^'+ val +'$'：''，true，false ）
.draw（）;
}）
column.data（）。unique（）。sort（）。each（function（d，j）{
select.append（'< option value ='+ d + >'+ d +'< / option>'）
}）;
}）;
}
}）;
解决方案
****** SOLVED **** **
最后解决了。这是我现在的整个代码（与上面的编辑比较）
jQuery：
// NO CHANGES HERE
$ .extend（$ .fn.dataTable.defaults，{
autoWidth：false，
columnDefs：[{
orderable：false，
width：'100px'，
targets：[5]
}]，
dom：'<datatable-headerfl><datatable-scrollt> <datatable-footerip>'，
language：{
search：'< span> Filter：< / span> _INPUT_'，
lengthMenu：'< span>显示：< / span> _MENU_'，
分页：{'first'：'First'，'last'：'Last'，'next'：'& rarr;'，'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-搜索输入thead th'）。eq（$（this）.index（））。text（）;
$（this）.html（'< input type =textclass =form-control input-smplaceholder =Search'+ title +'/>'）;
}）;
// ****更改此处****
$（'。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-selectdata-placeholder =Filter>< option value =>< / option>< / select>'）
.appendTo（$（'td.tfoot_select'）。empty（））
.on（'change'，function（）{
var val = $ .fn.dataTable.util.escapeRegex（
$（this）.val（）
）;
列
.search（val？'^'+ val +'$'：''，true，false）
.draw（）;
}）;
column.data（）。unique（）。sort（）。each（function（d，j）{
select.append（'< option value ='+ d + >'+ d +'< / option>'）
}）;
}
}）;
}
}）;
My question is simliar to DataTables : filtering different types of filtering on individual columns, however that question was not answered so I'm hoping someone could help us both out.
I'm using jQuery Datatables 1.10.8 and I currently have individual column filtering for the 4 of my 6 columns (last column does not require filtering).
What I'm trying to do is this:
- Columns 1-4: "text input" filter
- Column 5: "select" filter
I'm trying to use multiple filter types in the table, but I cannot find anything to help me out.
This is my current code:
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>')
});
});
}
});
解决方案
****** SOLVED ******
Finally solved it. Here's my entire code now (compare with the above edit)
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>')
});
}
});
}
});
这篇关于可数据过滤器单独的列输入和选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
