下面提到了数据表网站上提到的所有列的选择选项功能。我如何让它仅过滤第一列的下拉值上的表数据,并将选择下拉列表放置在其他位置而不是通常的标题部分。 see link for example
initComplete: function () {
var api = this.api();
api.column().indexes().flatten().each( function (i) {
var column = api.column(i);
var select = $('<select><option value=""></option></select>').appendTo('$selectTriggerFilter').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>' )
} );
} );
}
我正在使用以下代码。一旦我删除 dom 选项,选择选项就会出现,但不是没有 dom。
$(document).ready(function() {
$('#tableTrigger').DataTable({
"lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
searching: false,
"scrollY": "200px",
"dom": 'frtipS',
"deferRender": true,
initComplete: function ()
{
var api = this.api();
api.columns().indexes().flatten().each( function ( i )
{
if(i == 0){ //Create just one SelectBox
var select = $('<select class='+i+'><option value=""></option></select>')
.appendTo( '#selectTriggerFilter')
.on( 'change', function () {
var val = $(this).val();
column( i ).search( val ? '^'+$(this).val()+'$' : val, true, false ).draw();
});
column( i ).data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' );
} );
}
else return;
});
}
});
});
最佳答案
CAUSE
您的代码存在一些问题:
searching
不应设置为false
,否则search()
函数将无法工作列
变量未定义
SOLUTION
下面是更正后的代码。
$(document).ready(function() {
$('#tableTrigger').DataTable({
"lengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
"scrollY": "200px",
"dom": 'rtipS',
// searching: false,
"deferRender": true,
initComplete: function () {
var column = this.api().column(0);
var select = $('<select class="filter"><option value=""></option></select>')
.appendTo('#selectTriggerFilter')
.on('change', function () {
var val = $(this).val();
column.search(val ? '^' + $(this).val() + '$' : val, true, false).draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
}
});
});
注释
我在
"dom": 'frtipS'
中省略了f
,因为我认为您最初想通过设置搜索
来排除它> 为假
。如果您希望搜索框与下拉过滤器一起使用,请包含f
。如果您在
<dom
属性中省略l
,那么设置lengthMenu
就没有意义。
DEMO
参见this jsFiddle用于演示更正后的代码。
关于javascript - 仅在数据表中根据第一列的下拉值过滤表数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28494355/